jQuery下拉菜单切换问题

Question

当我点击打开时，它会切换所有子菜单。我想仅切换ul下的确切li。

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".has-children>a").click(function(event){
        event.preventDefault();
    });
    $('.has-children').click(function() {
        $(this).find('>ul').toggle(300);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li class="has-children">
    <a href="#">open</a>
        <ul class="submenu" style="display:none">
            <li class="has-children">
            <a href="#">open</a>
                <ul class="submenu" style="display:none">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过将find()更改为children()来仅定位li的直接子女来实现此目的。

＆＃13;

＆＃13;

$(document).ready(function(){
    $(".has-children>a").click(function(event){
        event.preventDefault();
    });
    $('.has-children').click(function() {
        $(this).children('ul').toggle(300);
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li class="has-children">
    <a href="#">open</a>
        <ul class="submenu" style="display:none">
            <li class="has-children">
            <a href="#">open</a>
                <ul class="submenu" style="display:none">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

然而，这会导致点击儿童的孩子关闭菜单的问题，因此您可以使用a标记和jQuery next()功能来切换而不是children()或{ {1}}像这样：

＆＃13;

＆＃13;

find()

＆＃13;

$(document).ready(function() {
  $(".has-children>a").click(function(event) {
    event.preventDefault();
    $(this).next().toggle(300);
  });
});

＆＃13;

＆＃13;

＆＃13;

这也使你的脚本更短。