1

このシンプルなヘッダーメニューがありますが、クリックする#nav liと、が 切り替わり続けます。ドキュメントの他の場所をクリック#nav ulすると非表示になります。#nav ul

   $(document).ready(function() {
      $('#nav li').click(function() {
      $('ul', this).show('fast');
    });

     $(document).click(function() {
        $('ul','#nav li' ).hide('fast');

    });

  });

これがSimpeHTMLです。http://jsfiddle.net/pMaL5/

 <div id="nav">

    <li style="margin-top: -15">
        <a class="modalbox"  href="#header2_li" style="font-size: 40px;">ADD</a>
        <ul>
        <li>
            <a class="modalbox" href="#inlineheadersend">Settings</a>
        </li>
        <li>
            <a>News</a>
        </li>
    </ul>
    </li>

    <li>
        <span href="#">Messages</span>
        <ul>
            <li>
                <a class="modalbox" href="#inlineheadersend">compose new</a>
            </li>
            <li>
                <a>show messages</a>
            </li>
        </ul>

        <div class="clear"></div>
    </li>


</div>
4

3 に答える 3

3

イベントがバブルアップするため、をクリックするliと、暗黙的にdocument（documentの祖先であるためli）もクリックします。あなたはそれを防ぐことができますe.stopPropagation()：

$('#nav li').click(function(e) {
  e.stopPropagation();
于 2012-11-26T19:15:36.950 に答える
2

問題は、pimvdb が言及したことです。すべてのクリックがドキュメントに反映されます ( を呼び出さない限りstopPropagation())。

言及された pimvdb の問題 (呼び出しstopPropagation) は、ドキュメントに至るまでのクリックに依存する他のハンドラーが存在する可能性があることです。ファンシーボックスで起こっているように見えるのはどれですか

HTML を変更して、より意味があり、読みやすくしました。以前の HTML はすべてliの s でハンドラーを設定していましたが、最初の s に対してのみ実行する必要があります。HTML をより意味のあるものにするために、いくつかのクラス名を追加しました。タグ名に依存するのはあまり良い方法ではありません

<div id="nav">
  <ul>
    <li class="add"><a class="modalbox">ADD</a></li>     
    <li>
        <span href="#">Messages</span>
        <ul class="showhide">
            <li><a class="modalbox" href="#inlineheadersend">compose new</a></li>
            <li><a>show messages</a></li>
        </ul>
        <div class="clear"></div>
    </li>
   </ul>
</div>​

http://jsfiddle.net/8s6wJ/1/

次のスクリプトは、クリックの伝播を妨げることなく、上記の HTML に対して必要なことを行います。

$(document).ready(function() {
    $('#nav').click(function() {
        $('.showhide').show('fast');
    });

     $(document).click(function(e) {
         // Only hide if actual element clicked 
         // was not a child of #nav
         if ($(e.target).closest('#nav').length == 0) {
             $('.showhide').hide('fast');
         }
    });
});​
于 2012-11-26T20:05:17.397 に答える
1

これは、ドキュメントに何もバインドしない別の方法です。

$(document).ready(function() {
    $('#nav').click(function() {
        $('.showhide').show('fast').focus();
    });

    $('.showhide').focusout(function(e) {
         $(this).hide('fast');
    }).focus();
});​

Juan Mendes の回答に基づくDEMOを参照 してください

于 2012-11-26T20:18:28.697 に答える