Javascript Don'；t不允许同时打开同一类的两个菜单

我不希望两个菜单能够同时打开。我想要的是：如果一个菜单打开，你点击下一个菜单，第一个菜单将关闭。我加入了我的JSFIDLE，这样您就可以更好地理解我在寻找什么，jQuery2.1已经启用

请看这里：

$（文档）.ready（函数（）{
$.fn.dropDown=函数（hiddenClass）{
var=这个；
$（'html'）。单击（函数（）{
每个（函数（）{
$（this.find（'.small_ul_list'）.addClass（hiddenClass）；
});
});
返回此值。每个（函数（）{
var$this=$（this）；
$this.data（'desktop\u menuTrigger'，true）；
$this.find（'.small_ul_list'）.addClass（hiddenClass）；
$this。单击（函数（e）{
$（this）.find（'.small_ul_list'）.toggleClass（hiddenClass）；
e、 停止传播（）；
if（$（e.target）.parent（）.data（'desktop\u menuTrigger'））{
e、 预防默认值（）；
}
});
});
}
$（'.desktop__菜单'）。下拉列表（'隐藏'）；
});
。汉堡主菜单{
显示：块；
宽度：28px；
浮动：左；
身高：100%；
左边距：14px；
}
/*桌面菜单*/
.隐藏{
显示：无
}
.桌面菜单{
.更大的清单{
.较小的列表{
宽度：200px；
边框：2倍纯色灰色；
边框底部：无；
/*高度：350px*/
背景：灰色；
/*溢出y：滚动*/
利润上限：-20px；
/*边界半径：8px*/
李{
明确：两者皆有；
高度：47px；
边框底部：2倍纯色灰色；
线高：47px；
字母间距：.3px；
右侧填充：15px；
文本转换：大写；
字体大小：15px；
字号：700；
&：悬停{
背景：#fff；
}
}
李：第一个孩子{
边界半径：8px 8px 0；
}
img{
宽度：30px；
}
a{
颜色：灰色；
文字装饰：无；
李{
边框底部：2倍纯色灰色；
线高：47px；
字母间距：.3px；
右侧填充：15px；
文本转换：大写；
字体大小：15px；
颜色：黑色；
&：悬停{
背景：#fff；
}
}
}
}
}
}




试验












试验



您可以通过隐藏所有其他
。在切换所需元素时，隐藏较小的
元素来实现这一点。试试这个：

$this.click(function(e) {
    var $smallerUlList = $(this).find('.smaller_ul_list').toggleClass(hiddenClass);
    $('.smaller_ul_list').not($smallerUlList).addClass(hiddenClass);
    e.stopPropagation();
    if ($(e.target).parent().data('desktop__menuTrigger')) {
        e.preventDefault();
    }
});