Javascript 如何从父级的同级中删除类 我正在使用Fuffic的CuffScript脚本，当我尝试使用子菜单选项时，它并不是在框外工作（当然）。我意识到这并不是在非画布导航中向li的ul添加一个类（向右移动）。所以我写了一个脚本来添加这个类，可以在这里找到： jQuery(document).ready(function() { jQuery('ul.off-canvas-list li a').click(function() { jQuery('ul.off-canvas-list li ul.left-submenu').addClass('move-right'); }); });

下面是我的HTML的结构：

<ul class="off-canvas-list">
    <li class="has-submenu"><a href="#">Name 1</a>
        <ul class="left-submenu">
            <li class="back"><a href="#">Back</a></li>
            <li><a href="#"></li>
            <li><a href="#"></li>
        </ul>
    </li>
    <li class="has-submenu"><a href="#">Name 2</a>
        <ul class="left-submenu">
            <li class="back"><a href="#">Back</a></li>
            <li><a href="#"></li>
            <li><a href="#"></li>
        </ul>
    </li>
    <li class="has-submenu"><a href="#">Name 3</a>
        <ul class="left-submenu">
            <li class="back"><a href="#">Back</a></li>
            <li><a href="#"></li>
            <li><a href="#"></li>
        </ul>
    </li>
    ...etc
</ul> 

---

您可以使用以下命令将其直接添加到单击的元素中

jQuery(document).ready(function() {
    jQuery('.left-submenu li a').click(function() {
        jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
        jQuery(this).parents('.left-submenu').addClass('move-right'); // add class move-right to the parent with class left-submenu of current element
    });
});

编辑： 如果在更新的代码中，您只想在

.has子菜单

之后单击

a

，您可能需要它，因此它不会在

内的
a
单击时触发
。左子菜单


很抱歉，我的错误是在发布前没有再次查找代码，因为
ul.left子菜单
与
a
处于同一位置，而不是子菜单，您需要使用
.sides
获取
ul.left子菜单
，因此将代码更改为此

jQuery(document).ready(function() {
    jQuery('.has-submenu > a').click(function() {
        jQuery('.left-submenu').removeClass('move-right');
        jQuery(this).siblings('.left-submenu').addClass('move-right');
    });
});

这里是工作的
目标元素是被单击元素的祖辈，因此您可以使用最接近的

方法：

$('ul.off-canvas-list li a').click(function() {
    $('.move-right').removeClass('move-right');
    $(this).closest('ul.left-submenu').addClass('move-right');
});

---

您的选择器太宽。如果要在单击“代码>具有子菜单”时将

向右移动

添加到

左子菜单

，则需要执行以下操作：

    $('.has-submenu').click(function() {
        $(this).find($('.left-submenu')).addClass('move-right');
    });

小提琴：

如果需要重置

向右移动

，请执行以下操作：

    $('.has-submenu').click(function() {
        $('.move-right').removeClass('move-right');
        $(this).find($('.left-submenu')).addClass('move-right');
    });

小提琴：

---

更新的标记： 对于更新后的标记，可以将目标定位在锚标记后的下一个（）元素：

$('.has-submenu > a').on('click', function() {
    $('.move-right').removeClass('move-right');
    $(this).next().addClass('move-right');
});

---

Fiddle:

好的，那么您想添加一个类

向右移动

到

ul.左子菜单

，该子菜单位于您单击的

has子菜单

的正下方，对吗

因此：

---

选择符指向所有ul.left子菜单元素的方式，另一种仅指向单击的元素的方式如下：

$('.off-canvas-list').on('click', 'ul.off-canvas-list li a', function (){
   $('.move-right').removeClass('move-right');
   $(event.target).closest('ul.left-submenu').addClass('move-right');

});

---

检查我的更新代码。我遗漏了我在脚本中提到的选择器a链接，我复制并粘贴了你的代码字母，但它似乎不是working@user3532666，抱歉，在发布代码之前没有重新检查你的结构，用一个工作示例更新了答案我得到了你想要的。您需要的是使用$（this）.next（）.addClass（'move-right'）以DOM中的下一个元素为目标；我昨天从你第二次发布的代码中找到了它：）谢谢你的帮助！你有最好的用户名，所以请检查我的更新代码。我遗漏了我在脚本中提到的选择器a链接检查我的更新代码。我遗漏了我在脚本中提到的选择器a链接。在本例中，您可以使用选择器$（'.has submenu>a'）。我正在使用您的解决方案，但遇到了关闭ul.left子菜单的问题，当我单击在活动ul中找到的第一个元素时，该子菜单处于活动状态：“li class=”back“>当您单击此li或其内部的a时，我需要能够关闭活动的ul。我尝试了以下操作，但没有成功：jQuery（'li.back'）.on（'click'，function（）{jQuery（'ul.left子菜单'）.removeClass（'move-right'）；}）；这根本不是添加类。除非我把它复制粘贴错了，否则它似乎不起作用

$('.has-submenu > a').on('click', function() {
    $('.move-right').removeClass('move-right');
    $(this).next().addClass('move-right');
});

$(document).ready(function() {

    //Trigger the click only on the li's has-submenu
    $('li.has-submenu').on('click', function() {

        //Remove the class from other ul, if there's any
        $('ul.left-submenu').removeClass('move-right');

        //Finds the direct ul child using the '>' selector, and adds the class.
        $(this).find('> ul.left-submenu').addClass('move-right');
    });

});

$('.off-canvas-list').on('click', 'ul.off-canvas-list li a', function (){
   $('.move-right').removeClass('move-right');
   $(event.target).closest('ul.left-submenu').addClass('move-right');

});