Question

我有一个搜索图标，当盘旋时会显示输入文本搜索框。我正在使用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类，但它不起作用。

I've got a fiddle here

Answer 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');
    });
})

演示：Fiddle

Answer 2

问题是，当您点击输入时，正文的点击事件仍然会出现。

有一个简单的解决方案。只需在点击输入时停止event's propagation。

jsFiddle Demo

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

P.S - 请注意我已从JS中删除了:not selector。这已经变得没必要了。

jQuery的问题：不是选择器

2 个答案: