0

ユーザーが矢印 (.userArrow) をクリックすると非表示のメニューが表示され、ユーザーがコンテナーの外側をクリックすると非表示になります (.menuTrigger)

<div class="box">

              <div class="menuTrigger fRight">
                  <span class="userArrow ">filtrar ▾&lt;/span>
                  <ul class="userOptionsUl dropdownMenu" style="display: none;">
                        <li><input type="text"></li>
                   </ul>
               </div>

</div>

Javascript

$(function() {

    /* el dropdown del dock*/
    $('.menuTrigger .userArrow').click(function(e) {
        e.preventDefault();
        $(this).parent().find('.dropdownMenu').show();
        e.stopPropagation();
    });
    $('body').not('.menuTrigger').click(function() { /* cambiar por la otra clase que tiene*/
        $('.dropdownMenu').hide();
        console.log('yo lo he escondido');
    });

});

http://jsfiddle.net/5VQXg/

ここでの私の問題は、ユーザーがクリックして非表示のメニューを表示し、クリックして入力に入力したときです。メニューが隠れています。

すべてのクリックが .menuTrigger (または子) 内にあるということ

質問は、 $('body').not('.menuTrigger').click()すべてのクリックがこのコンテナの子にあるのはなぜですか?

4

1 に答える 1

3

あなたのコードが行っていることはmenuTrigger、存在しないクラスの body 要素を除外することです。

実際に行う必要があるのは、クリックされた要素 ( e.target) が menuTrigger 内にあるかどうかを確認し、そうである場合はコードを実行しないことです。

$('body').click(function(e) { /* cambiar por la otra clase que tiene*/
    // If the clicked element is not inside menuTrigger div hide the menu
    if (!$(e.target).closest('.menuTrigger').length) {
        $('.dropdownMenu').hide();
        console.log('yo lo he escondido');
    }
});

http://jsfiddle.net/5VQXg/3/

于 2012-12-11T15:11:26.633 に答える