0

我有一个搜索图标，当悬停在上面时会显示一个输入文本搜索框。我正在使用 jQuery 向输入添加一个类，以在搜索图标悬停时显示文本框。那工作正常。

下一个功能是，如果用户决定不点击搜索框和页面上的其他位置，搜索框就会消失。这也很好。

唯一剩下的问题是，如果用户在搜索框中单击，它也会消失，这是我不想要的。

我的 HTML：

<input type="text" class="form-text text-hidden" title="Enter the terms you wish to search for." value="" size="15" id="edit-search-block-form-1" name="search_block_form" maxlength="128">

<input type="image" src="http://d3j5vwomefv46c.cloudfront.net/photos/large/802431483.png?1377197793" class="form-submit search-hover" alt="Search" id="edit-submit">

我的 jQuery：

$(".search-hover").hover(function () {
    $('.text-hidden').addClass('hover');
  });

  // Now remove the class in case of a false start or the user decides to do something else.
  $("body:not(.text-hidden)").click(function(){
      //alert('The body click is working!!!');
    $('.form-text.text-hidden').removeClass('hover');
  });

请注意，我正在尝试使用:not选择器来指示仅在hover单击搜索框以外的任何位置但它不起作用时才删除该类。

我这里有一个小提琴

4

2 回答 2

1

尝试

jQuery(function(){
    $(".search-hover").hover(function () {
        $('.text-hidden').addClass('hover');
    });

    // Now remove the class in case of a false start or the user decides to do something else.
    $("body").click(function(e){
        //alert('The body click is working!!!');
        if($(e.target).closest('.text-hidden').length == 0)
            $('.form-text.text-hidden').removeClass('hover');
    });
})

演示：小提琴

于 2013-08-24T14:26:08.037 回答
1

问题是当你点击输入的时候，body的点击事件还是会出现。

有一个简单的解决方案。只需在单击输入时停止事件的传播。

jsFiddle 演示

$(".form-text.text-hidden").click(function(e) {
    e.stopPropagation();
});

PS - 请注意，我已经:not selector从 JS 中删除了。它变得不必要了。

于 2013-08-24T14:28:51.550 回答