Question

我正在使用Foundation的非画布脚本，当我尝试使用子菜单选项时，它当然没有开箱即用（当然）。我意识到它并没有在画布外导航中添加一个类（向右移动）。所以我写了一个脚本来添加可以在这里找到的类：

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下面。我无法弄清楚如何添加课程＆＃39; move-right＆＃39;只有＆lt; ul.left-submenu＆＃39;我点击的父母李的孩子，并删除了“移动权利”。来自另一个＆lt; ul.left-submenu＆＃39;

我想可能正在使用sibling（）选择器，但我不太确定如何在我的脚本中实现它。非常感谢任何和所有帮助。

出现了另一个问题，那就是能够关闭已打开的＆＃34; ul.left-submenu＆＃34;点击＆＃34;返回＆＃34;在每个ul.left-submenu中出现在其他li之前。我更新了上面的HTML以包含＆＃34;＆＃34;并且还提供了下面的脚本，我尝试使用它还没有工作。

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');
});

Answer 2

您可以使用此

将其直接添加到点击的元素中

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

编辑：

如果在更新后的代码中，您希望在a后立即点击.has-submenu，则可能需要这样做，因此on click没有触发a在.left-submenu内 <击>

<击>

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

<击> 抱歉我的错误在发布之前没有再查看代码，因为ul.left-submenu与a处于同一位置，而不是它的孩子，您需要使用.siblings来获取{{1 ，所以将代码更改为此

ul.left-submenu

这是工作Example in Fiddle

Answer 3

你的选择器过于宽泛。如果您要点击move-right时要将left-submenu添加到has-submenu，那就是您需要做的事情：

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

小提琴：http://jsfiddle.net/x9zcav0p/

如果您需要重置move-right，请执行以下操作：

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

小提琴：http://jsfiddle.net/x9zcav0p/1/

更新了标记：对于更新的标记，您可以在锚标记之后定位next（）元素：

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

小提琴：http://jsfiddle.net/x9zcav0p/2/

Answer 4

好的，所以您想要将move-right类添加到您点击的ul.left-submenu has-submenu正下方的li，对吗？

所以：

$(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');
    });

});

Answer 5

你的选择器以你所拥有的所有ul.left-submenu元素为目标的方式，另一种只针对被点击元素的方法就是这样：

$('.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');

});

如何从父母的兄弟姐妹中删除一个班级

5 个答案:

编辑：