Javascript 多级下拉列表

您好，我正在开发一个jquery脚本来处理对下拉元素的多次单击

脚本基于数据属性添加和删除类，并在外部单击时将其删除

问题是：

如果我将另一个元素嵌套在一个要切换的类中，并单击它，则父元素将移除它的类。我希望家长保持自己的课堂，并应用孩子需要的课堂

我怎样才能防止这种情况

我只有一条规则，绝对不使用e.stopPropagation（）

我已经看过很多使用stopPropagation方法的代码片段和脚本，如果我有其他脚本与元素交互，这是很危险的

提前感谢你的帮助

jQuery（函数（）{
变量切换=[]；
jQuery（'.js toggle'）。每个（函数（）{
var el=jQuery（此），
toToggle=el.attr（'data-toggleClass'）；
el.on（'点击'）功能（e）{
if（el.HASSCLASS（toToggle））{
el.移除类（toToggle）；
el.removeClass（“is-active”）；
toggled.pop（）；
}否则{
el.addClass（toToggle）；
el.addClass（'is-active'）；
if（切换索引of（toToggle）=-1）{
切换。推（toToggle）；
}
}
});
});
jQuery（document）.on（'click'，函数（e）{
var targetEl=jQuery（即target），
toToggle=targetEl.attr（'data-toggleClass'），
lastToggled=toggled[toggled.length-1]，
toggleType=jQuery（'.js toggle'）.attr（'data-toggleType'）；
如果（！targetEl.is（'.js toggle'）&&！targetEl.is（'.js toggle*'））{
开关（开关式）{
“全部”案例：
jQuery（'.js toggle'）。每个（函数（）{
var el=jQuery（此），
elClass=jQuery（this.attr（'data-toggleClass'）；
el.removeClass（elClass）；
el.removeClass（“is-active”）；
toggled.pop（）；
});
打破
“反向”情况：
jQuery（'..+lastToggled）.removeClass（lastToggled）；
toggled.pop（）；
打破
}
}
});
});
.box{
宽度：100px；
高度：100px；
显示：内联块；
背景：黑色；
右边距：10px；
位置：相对位置；
}
.盒子，盒子{
宽度：20px；
高度：20px；
位置：绝对位置；
底部：0；
左：0；
}
.box.active{
背景：黑暗；
}
.box.test-1{
背景：深蓝色；
}
.box.test-2{
背景：暗绿色；
}
您可以使用e.stopPropagation（）；防止事件在DOM树中冒泡。您还可以删除.each（），因为.on（）已经绑定到给定类的所有元素

例如：

$('.js-toggle').on('click', function(e) {
    e.stopPropagation();
    toToggle = $(this).attr('data-toggleClass');
    if ($(this).hasClass(toToggle)) {
      $(this).removeClass(toToggle);
      $(this).removeClass('is-active');
      toggled.pop();
    } else {
      $(this).addClass(toToggle);
      $(this).addClass('is-active');

      if(toggled.indexOf(toToggle) === -1 ){
        toggled.push(toToggle);
      }
    }
});

下面是一个.
我将分离涉及子div和父div的方法和类，只需使用clear函数同时删除这两个div