jQuery使用其父级在锚点上切换以找到子ul

Question

我正在尝试使用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>

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

Answer 2

我认为您只上升了一个级别（与li一起使用是因为它上升了一个级别，而'a'上的事件需要上升2个级别），您需要上升2个级别才能获得ul 。 因此，使用.parent（）第二次，或使用。家长（），该上升的任何数量的级别。

Answer 3

如果我理解这一权利，那么问题是当您单击li中的元素时，会触发li事件吗？ 如果是这样，如何向li子元素添加event.stopPropagation？

像这样

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

jQuery使用其父级在锚点上切换以找到子ul

问题描述

3 个解决方案

解决方案1
1 2012-07-13 15:33:06

解决方案2
1 2012-07-13 15:38:15

解决方案3
1 2012-07-13 15:56:47

jQuery使用其父级在锚点上切换以找到子ul

问题描述

3 个解决方案

解决方案1 1 2012-07-13 15:33:06

解决方案2 1 2012-07-13 15:38:15

解决方案3 1 2012-07-13 15:56:47

解决方案1
1 2012-07-13 15:33:06

解决方案2
1 2012-07-13 15:38:15

解决方案3
1 2012-07-13 15:56:47