11

3 つのレベルにドリルダウンする次のメニューがあります。 Main > sub > subsub

<nav>
      <div class="mainMenu">Main Menu Item # 1.
                    <ul>
                        <li> Sub Menu Item # 1</li>
                        <li class="subMenu"> Sub Menu Item # 2
                            <ul>
                                <a href="New">
                                    <li>New</li>
                                </a>
                                <a href="">
                                    <li>Old</li>
                                </a>
                                <a href="">
                                    <li>View </li>
                                </a>
                            </ul>
                             <div class="n_r2_c2"></div>
                        </li>
                        <li> Sub Menu Item # 3</li>
                        <li> Sub Menu Item # 4</li>
                    </ul>
  </div>

そして、これは私のJQとして：

$('.mainMenu').click(function () {
    $(this).children('ul').slideToggle(250);
});

$('.subMenu').click(function () {
        $(this).children('ul').slideToggle(250);
});

問題は、メインのサブメニューのサブメニューの切り替えが正常に機能することですが、サブメニューを切り替える代わりにサブメニューの項目をクリックすると、サブメニューをクリックするとメインメニューclickイベントも最も発生するため、それ自体が閉じますおそらく、サブメニューがその中にあり、それをクリックするとメイン div をクリックするためでしょうか?

とにかく、どうすればこの問題を解決できますか、助けてください。

4

1 に答える 1

18

event.stopPropagation()を使用して、イベントが DOM ツリーをバブリングしないようにします。

例：

$('.subMenu').click(function (e) {
    $(this).children('ul').slideToggle(250);
    e.stopPropagation();
});

これで問題が解決します。

于 2013-10-13T10:55:29.320 に答える