我试图创建一个侧栏，其中有两个并排输入：搜索|订阅。当用户单击一个输入（例如搜索）时，我希望第二个输入（订阅）消失，以便其他输入可以增长以填充空间。我的猜测是，这在纯CSS中是不可能的，所以它需要jQuery吗？如果它确实需要jQeury，那么有人对在这两个领域之间切换所需的基本知识有什么建议吗？我对jQuery几乎一无所知。
CSS已经增加了字段以填充宽度，我只需要弄清楚如何显示：对于未选择的字段，无。提前感谢您的帮助。
输入：
<form role="search" method="get" id="searchform" action="<?php echo home_url(\'/\'); ?>">
<div class="row collapse">
<div class="small-12 columns">
<input type="subscribe" value="" name="subscribe" id="subscribe" placeholder="<?php _e(\'SUBSCRIBE\', \'reverie\'); ?>"> <input type="search" value="" name="s" id="s" placeholder="<?php _e(\'SEARCH\', \'reverie\'); ?>">
</div>
</div>
</form>
CSS：
input[type="search"], input[type="subscribe"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
outline: none;
border: none;
background: none;
display: inline;
width: 70px;
font-size:14px;
font-weight:500;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus, input[type=subscribe]:focus {
border-bottom: 3px solid #bcbbab;
width: 100%;
background: none;
}
最合适的回答,由SO网友:Rohit Pande 整理而成
这个问题超出了这里的范围。你应该试试stackoverflow 对于这个问题。
虽然我想回答你的问题。
您需要使用一些CSS和JQuery来获得所需的结果。
查看工作小提琴here.
希望这对你有用。
CSS添加：
input[type=subscribe]:focus + input[type=search] {
display:none;
}
JQuery代码：
$(function(){
$("#s").focus(function(){
$("#subscribe").hide();
});
$("#s").focusout(function(){
$("#subscribe").show();
});
})
