0

jquery を使用してメニューのセグメントを切り替えようとしています。要素にトグルをバインドすると機能します<li>が、要素内の要素をクリックするとすぐに<li>、明らかにトグルのために要素が消えます。そのため、トグル イベントをアンカーに追加しようとしましたが、成功しませんでした。以下のコードを参照してください。Jquery は一番下にあります。ありがとう

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <header><link href="mobmenu.css" rel="stylesheet" type="text/css"/>
        </header>
        <div id="wrapper">
        <h1>Flyout Menu Demo - (Vertical Menu System) </h1>
            <div id="main_navigation">
                <ul class="menu_level1">
                    <li><a href="#">Home</a></li>
                    <li class="submenu1"><a class = "sb1" href="#">Products</a>
                        <ul class="menu_level2">
                            <li class="submenu2"><a class = "sb2" href="#">Category 1</a>
                                <ul  class="menu_level3">
                                <li class="submenu"><a class = "sb3" href="#">Product 1</a>
                                    <ul  class="menu_level4">
                                    <li><a href="#">Product 1 Sub 1</a></li>
                                    <li><a href="#">Product 1 Sub 2</a></li>
                                    <li><a href="#">Product 1 Sub 3</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Product 2</a></li>
                                <li><a href="#">Product 3</a></li>
                                </ul>
                            </li>
                            <li class="submenu2"><a class = "sb2" href="#">Category 2</a>
                                <ul  class="menu_level3">
                                <li><a href="#">Product 1</a></li>
                                <li><a href="#">Product 2</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="submenu1"><a class= "sb1" href="#">Services</a>
                        <ul  class="menu_level2">
                            <li><a href="#">Services 1</a></li>
                            <li><a href="#">Services 2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.sb1').bind('mousedown', openSubMenu1);
                $('.sb2').bind('mousedown', openSubMenu2);

                //$('.submenu2').bind('mousedown', openSubMenu);

                function openSubMenu1() { $(this).parent.find('ul.menu_level2').toggle(); };
                function openSubMenu2() { $(this).parent.find('ul.menu_level3').toggle(); };

            });
        </script>

    </body>
</html>
4

3 に答える 3

1

表示されているセレクターを使用してみてください。私はこれをテストしていませんが、それが機能しない場合は正しい方向にプッシュする必要があります。

    <script type="text/javascript">
        $(document).ready(function() {
            $('.sb1').mousedown(function() {
                var tmp = $(this).parent.find('ul.menu_level2');
                if ($(tmp).is(':visible')) {
                    tmp.hide();
                } else {
                    tmp.show();
                }
            });
            $('.sb2').mousedown(function() {
                var tmp = $(this).parent.find('ul.menu_level3');
                if ($(tmp).is(':visible')) {
                    tmp.hide();
                } else {
                    tmp.show();
                }
            });
        });
    </script>
于 2012-07-13T15:33:06.837 に答える
1

あなたは1レベルしか上がらないと思います（ 「a」のイベントは2レベル上に移動する必要があるのに対し、1レベル上であるためliで機能しました）、 ulを取得するには2レベル上に移動する必要があります. したがって、もう一度 .parent()を使用するか、任意の数のレベルに上がる.parents()を使用してください。

于 2012-07-13T15:38:15.890 に答える
1

私がこれを正しく理解している場合、問題はli内の要素をクリックすると、liイベントがトリガーされることですか? もしそうなら、li の子要素に event.stopPropagation を追加してみてはどうでしょうか。

このようなもの

$('ul li').children().on('mousedown', function(event){
    event.stopPropagation();
});
于 2012-07-13T15:56:47.000 に答える