javascript jQuery - 显示/隐藏搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14716546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - show/hide search box
提问by Trevan Hetzel
I've written a little jQuery to slide open a search box when a div is clicked. Basically, on click it shows a div that's initially hidden & inside that div is a search box and a close button. That's all working fine. What isn't working however is the close button. My guesses are that the close button is not hiding that div because it itself is inside the div. Here's what I've got and here's a jsfiddle.
我编写了一个小 jQuery 来在单击 div 时滑动打开一个搜索框。基本上，单击它会显示一个最初隐藏的 div，该 div 内是一个搜索框和一个关闭按钮。这一切正常。然而，关闭按钮不起作用。我的猜测是关闭按钮没有隐藏该 div，因为它本身在 div 内。这是我所拥有的，这是一个jsfiddle。
HTML
HTML
<ul class="tert-nav">
<li><img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /></li>
<li><img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /></li>
<li class="searchit">
<img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" />
<div class="searchbox">
<img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" />
<input placeholder="search..." type="text" />
<input type="submit" value="" />
</div>
</li>
</ul>
jQuery
jQuery
$(document).ready(function() {
// Search
$('ul.tert-nav li.searchit').click(function() {
$(this).addClass('search');
$('.searchbox').fadeIn();
$('ul.tert-nav li img.searchicon').hide();
});
$('ul.tert-nav li.searchit img.closesearch').click(function() {
$('.searchbox').hide();
$('ul.tert-nav li').removeClass('search');
});
})
CSS
CSS
ul.tert-nav {
float: right;
position: absolute;
margin: 0;
padding: 0;
right: 0;
top: 0;
list-style: none;
}
ul.tert-nav li {
float: right;
width: 26px;
height: 28px;
background: #3c3c3c;
text-align: center;
margin-left: 2px;
cursor: pointer;
transition: all .2s ease;
-o-transition: all .2s ease;
-moz-transition: all .2s ease;
-webkit-transition: all .2s ease;
}
ul.tert-nav li:hover {
background: #000;
}
ul.tert-nav .search {
width: 246px;
text-align: left;
cursor: default;
}
ul.tert-nav .search:hover {
background: #3c3c3c;
}
ul.tert-nav .searchbox {
display: none;
width: 100%;
}
ul.tert-nav .searchbox .closesearch {
float: left;
margin: 6px 4px 0px 4px;
cursor: pointer;
}
ul.tert-nav .searchbox .closesearch:hover {
opacity: 0.8;
}
ul.tert-nav .searchbox input[type=text] {
float: left;
width: 184px;
height: 24px;
padding: 0px 0px 0px 10px;
margin: 2px 0px 0px 0px;
border: none;
background: url(images/search-bg.png) no-repeat;
outline: none;
}
ul.tert-nav .searchbox input[type=submit] {
float: left;
width: 26px;
height: 24px;
margin: 2px 0px 0px 0px;
padding: 0px;
border: none;
background: url(images/search-btn.png) no-repeat;
outline: none;
cursor: pointer;
}
Also, here's an example image of the initial state and the clicked/opened state to give a visual idea of what I'm trying to do. Thanks!
此外，这是初始状态和单击/打开状态的示例图像，以直观地了解我正在尝试执行的操作。谢谢！
回答by freejosh
Because the close button is inside the .searchitbox, the first handler is also being fired right after. Stop the propagation of the click event during the close handler and it should work:
因为关闭按钮在.searchit框内，所以第一个处理程序也会立即被触发。在关闭处理程序期间停止点击事件的传播，它应该可以工作：
$('ul.tert-nav li.searchit img.closesearch').click(function(e) {
e.stopPropagation();
$('.searchbox').hide();
$('ul.tert-nav li').removeClass('search');
});
回答by Nope
Alternative to stopPropagation()is to only let the divdo it's thing if it was the divthat was clicked on.
替代方法stopPropagation()是仅在点击了div它的情况下才让它做它的事情div。
This can come very handy if you have either lot of elements inside the control with their own click events and you don't want to update all of them or if you need to let the click event propagate but still want to be able to distinguish within in some click events along the way.
如果您在控件内有很多具有自己的点击事件的元素并且您不想更新所有元素，或者如果您需要让点击事件传播但仍然希望能够在其中进行区分，这会非常方便在沿途的一些点击事件中。
Though in your specific situation stopPropagation()will be easier off course.
尽管在您的特定情况下stopPropagation()会更容易。
$('ul.tert-nav li.searchit').click(function (event) {
// Did the click originate from this?
if(event.target !== this){
// No, it wasn't. So we do nothing.
return;
}
$(this).addClass('search');
$('.searchbox').fadeIn();
$('ul.tert-nav li img.searchicon').hide();
});
DEMO- Validate the source of the click event
DEMO- 验证点击事件的来源
