Question

我正在尝试使用jquery在菜单中切换片段。如果我绑定<li>元素上的切换，我可以使它工作，但是当我点击<li>中的任何元素时元素消失，显然是因为切换。所以我尝试将toggle事件添加到锚点但没有成功，请参阅下面的代码。 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>

Answer 1

尝试使用visible selector。我没有对此进行过测试，但如果它不起作用，它应该是正确的方向。

    <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>

Answer 2

我认为你只上升了一个级别（与 li 一起使用，因为它高一级，而'a'上的事件需要升级2级），你需要获得2级以获得 ul 。因此，再次使用 .parent（），或使用 .parents（），这会增加任意数量的级别。

Answer 3

如果我理解这是正确的问题是当你点击里面的元素时，会触发li事件吗？如果是这样，如何将event.stopPropagation添加到li子元素？

像这样的东西

$('ul li').children().on('mousedown', function(event){
    event.stopPropagation();
});

Jquery使用其父级在锚点上切换以查找子级ul

3 个答案: