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

如果我理解这一点，问题是当您单击 li 内的元素时，会触发 li 事件？如果是这样，如何将 event.stopPropagation 添加到 li 子元素？

像这样的东西

$('ul li').children().on('mousedown', function(event){
    event.stopPropagation();
});
于 2012-07-13T15:56:47.000 回答
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

我认为你只会升一级（与li一起工作，因为它更高一级，而 'a' 上的事件需要升 2 级），你需要升 2 级才能获得ul . 所以再次使用.parent()，或者使用.parents()，它会上升任意数量的级别。

于 2012-07-13T15:38:15.890 回答