Question

在您在jsfiddle https://jsfiddle.net/Adyyda/osnq30bg/1/中看到的菜单中，如果我单击项目2（具有子项）中的三角形，则会显示子项。

如果我单击第3项中的三角形，则会显示儿童。

问题是我无法从已激活的项目1中关闭孩子。尝试过各种有关切换的解决方案，但是在这种特殊情况下，我想念一些使之实现的东西吗？

Answer 1

实际上，在您的$menuTrigger.click函数中没有任何地方可以“告诉”其他下拉菜单。您可以通过在打开被单击的对象之前关闭每个已打开的对象来做到这一点（您必须测试它是否不是您也单击的对象，否则您将无法再关闭，被点击的对象在切换之前已被关闭）：

$menuTrigger.click(function(e) {
    e.preventDefault();
    var $this = $(this);
    $menuTrigger.each(function(){
        if(!$this.is($(this)) && $(this).hasClass('active')){
            $(this).removeClass('active').next('ul').removeClass('active');
        }
    });
    $this.toggleClass('active').next('ul').toggleClass('active');
});

请参阅forked updated fiddle here

编辑：

要在关闭菜单时关闭菜单下拉菜单，可以在each中添加类似的$menulink.click；

$menulink.click(function(e) {
    e.preventDefault();
    $menulink.toggleClass('active');
    $menu.toggleClass('active');
    $menuTrigger.each(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active').next('ul').removeClass('active');
        }
    });
});

然后，要在外部单击时关闭菜单，可以将此类事件添加到body和html（我们必须向汉堡跨度添加一个ID，以便能够检测是否未单击也是如此）：

var $menuBurger = $('#menu-burger');

$('body, html').click(function(e) {
    var target = $(e.originalEvent.target);
    if(!target.is($menulink) && !target.is($menu) && !target.is($menuTrigger) && !target.is($menuBurger)){
        $menulink.removeClass('active');
        $menu.removeClass('active');
    }
});

updated fiddle

从其他元素上的切换元素中删除活动类

1 个答案: