jQuery下拉菜单切换问题

时间:2018-01-19 08:29:50

标签: javascript jquery html

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



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

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

1 个答案:

答案 0 :(得分:2)

您可以通过将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;

这也使你的脚本更短。