Question

我有这个jquery代码：

$(document).ready(function(){
//global vars
var searchBoxes = $(".box");
var searchBox = $(".box");
var searchBoxDefault = "Search...";

searchBoxes.focus(function(e){
    $(this).addClass("active");
    $('#searchoptions').show();
});
searchBoxes.blur(function(e){
    $(this).removeClass("active");
});

searchBox.focus(function(){
    if($(this).attr("value") == searchBoxDefault) $(this).attr("value", "");
});
searchBox.blur(function(){
    if($(this).attr("value") == "") $(this).attr("value", searchBoxDefault);
}); });

和html代码：

<div id="search" class="right">
  <form method="post" class="clearfix">
    <input class="box left" type="text" value="Search..." />
    <input class="button right" type="submit" value="" />
  </form>
  <div id="searchoptions">
    Options:<br /><input checked="checked" type="radio"> Option1</label>
    <input type="radio"> Option2</label>
    <input type="radio"> Option3</label>
  </div>
</div>

问题是：当我在#search id之外点击时，如何隐藏#searchoptions？

我试着点击身体，但是有虫子......并且没有完美运行......

Answer 1

正确点击将完美地运作。唯一要做的就是停止事件传播。这应该有用......

$('body').click(function() {
      $('#searchoptions').hide();
});

$('#searchoptions').click(function(event){
      event.stopPropagation();
});

@see http://api.jquery.com/event.stopPropagation/

Answer 2

好吧，因为页面上其他地方的click()会有效地调用$(searchbox).blur()事件处理程序，所以你可以在那里添加一些内容来实现效果：

searchBox.blur(function(){
    if($(this).attr("value") == "") {
        $(this).attr("value", searchBoxDefault);
    }

    $('#searchoptions').hide();

});

JS Fiddle demo

Answer 3

您可以做的是将单击事件绑定到文档，如果单击下拉列表中的内容，则会隐藏下拉列表，但如果单击下拉列表中的某些内容则不会隐藏它

searchBoxes.focus(function(e){
    $(this).addClass("active");
    $('#searchoptions').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                $('#searchoptions').hide();
            }
        });

    });
});

然后在隐藏它时，取消绑定点击事件

$(document).unbind('click');

点击外面＆gt;隐藏（）

3 个答案: