javascript - 如何从 parent 的 sibling 中删除类(class)

Question

我正在使用来自 Foundation 的 off-canvas 脚本，当我尝试使用子菜单选项时，它不是开箱即用的(当然)。我意识到它没有向 Canvas 外导航中 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> 

我的问题是我的脚本正在将类添加到所有 ul.left-submenu，而不仅仅是我单击的 li 正下方的子菜单。我无法弄清楚如何将“向右移动”类添加到我单击的父 li 的“ul.left-submenu”子级，并从另一个“ul”中删除“向右移动”类。左子菜单'

我想也许可以使用 sibling() 选择器，但我不太确定如何在我的脚本中实现它。非常感谢任何帮助。

出现了另一个问题，即可以通过单击每个 ul.left-submenu 中其他 li 之前的“返回”来关闭打开的“ul.left-submenu”。我更新了上面的 HTML 以包含“”，并且还提供了我尝试使用但没有用的下面的脚本。

jQuery('li.back').on('click', function() {
        console.log('close submenu');
        jQuery('ul.left-submenu').removeClass('move-right');
    });

Answer 1

目标元素是被点击元素的祖父元素，因此您可以使用closest 方法:

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