Question

我有一个格式为的菜单项：

<ul>
    <li class="menu-item-has-children"><a href="#"></a>
        <ul class="sub-menu">
            <li><a href=""></a></li>
        </ul>
    </li>
    <li class="menu-item-has-children"><a href="#"></a>
        <ul class="sub-menu">
            <li><a href=""></a></li>
        </ul>
    </li>
</ul>

目前我成功将一个类'active'添加到.sub-menu元素显示菜单，问题是我的脚本在我点击其中一个标签时显示两个菜单，我想要代码只显示点击内容的子元素...希望这有意义..这是我的jQuery代码：

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.menu-item-has-children').click(function(){
            jQuery('.sub-menu').next().toggleClass("active");
        });
    });
</script>

Thnaks

Answer 1

在事件处理程序中使用this。

jQuery(document).ready(function(){
    jQuery('.menu-item-has-children').click(function(){
        jQuery(this).find('.sub-menu').toggleClass("active");
    });
});

Answer 2

删除兄弟姐妹的课程，然后将课程添加到活动菜单...

<script type="text/javascript">
    $(function(){
        $('.menu-item-has-children').click(function(e){
            var $t = $(this);
            $t.siblings().find('.sub-menu').removeClass("active")
             $t.siblings().find('.sub-menu').addClass("active");
        });
    });
</script>

jQuery将toggleClass应用于选择器的子元素

2 个答案: