Question

我正在使用JS代码通过点击li项目从菜单中显示子菜单。当我点击一个li项目时，当子菜单slideToggle并且子菜单已经打开时，它就是slideUp。它运作得很好。

但是我有一个问题，当点击我的子菜单中的li时，它会再次滑动，然后再次滑动，我该如何防止这种情况？

这是我的jquery：

$("#menu li").click(function () {
    $('ul.sub-menu').not( $(this).children() ).slideUp();
    $(this).children("ul.sub-menu").slideToggle();
});

这是我到目前为止没有成功的尝试：

$("#menu li").not($('#menu li sub-menu li a')).click(function () {
    $('ul.sub-menu').not( $(this).children() ).slideUp();
    $(this).children("ul.sub-menu").slideToggle();
});

这是我的HTML：

<ul id="menu">
<li><a href="#">1</a></li>
<li>2
<ul class="sub-menu">
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
</ul> 
</li>
<li>3
<ul class="sub-menu">
<li><a href="#">3.1</a></li>
</ul> 
</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>

和我的CSS：

.sub-menu {display:none}

和Jsfiddle看到它在行动：

http://jsfiddle.net/2s023cfc/1/

任何人都可以帮我这个吗？感谢

Answer 1

试试这个 -

  $("#menu li").not($('#menu li sub-menu li a')).click(function (e) {
        $('ul.sub-menu').not( $(this).children() ).slideUp();
        $(this).children("ul.sub-menu").slideToggle();
        e.stopPropagation()
    });

你需要停止传播。

Answer 2

在JQuery中指定要将事件作为目标的最多元素！

＆＃13;

$("#menu > li > a").click(function () {
    $('ul.sub-menu').not($(this).siblings()).slideUp();
    $(this).siblings("ul.sub-menu").slideToggle();
});

＆＃13;

.sub-menu {
    display:none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a>
        <ul class="sub-menu">
            <li><a href="#">2.1</a></li>
            <li><a href="#">2.2</a></li>
        </ul>
    </li>
    <li><a href="#">3</a>
        <ul class="sub-menu">
            <li><a href="#">3.1</a>
            </li>
        </ul>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">6</a>
    </li>
</ul>

＆＃13;

打开子菜单onclick并关闭打开的子菜单

2 个答案: