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

問題は、入力をクリックすると、本体のクリック イベントがまだ発生することです。

簡単な解決策があります。入力がクリックされたときにイベントの伝播を停止するだけです。

jsFiddle デモ

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

:not selectorPS - JS からを削除したことに注意してください。不要になりました。

于 2013-08-24T14:28:51.550 に答える
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 に答える