1
我想创建一个类似于sample link所有子菜单项显示
导航菜单我创建了一个从无到有的jQuery和基于CSS的导航菜单，这应该显示的下拉菜单，如图上面的链接。我想要实现上面的菜单中显示的下拉式样。
我创建深度4级菜单，当我打开所有的菜单项一次，当我点击正在显示的所有菜单项，直至深度级别4第一层次深度的菜单项。
点击菜单项目1>菜单item1.2>菜单item1.2.2>菜单item1.2.2.2
现在点击菜单item1.2两次（所有子项目正在显示而不仅仅是菜单item1.2.1和菜单item1.2.2）
在那里我做错误？
$(document).ready(function(){
$('.menu-item').click(function(event){
event.stopPropagation();
$(this).toggleClass('active');
$('.col ul li').removeClass('active');
});
$('.col ul li').click(function(event){
event.stopPropagation();
$(this).toggleClass('active');
$('.col ul li ul').removeClass('active');
});
$('.col ul li ul').click(function(event){
$(this).toggleClass('active');
});
$('.col ul ul li ul').click(function(event){
$(this).toggleClass('active');
});
});.menu>li {
display: inline-block;
padding: 10px 20px;
}
.dropdown > .col {
display: none;
}
.visible {
display: block;
}
.col {
position: absolute;
top: 100px;
display: block;
}
.sub-col {
position: absolute;
left: 150px;
top: 0;
display: none;
}
.sub-sub-col {
position: absolute;
left: 150px;
top: 0;
display: none;
}
.sub-sub-sub-col {
position: absolute;
left: 150px;
top: 0;
display: none;
}
.active .col {
display: block;
}
.col .active .sub-col{
display: block;
}
.col .sub-col .active .sub-sub-col {
display: block;
}
.col .sub-col .sub-sub-col .active .sub-sub-sub-col{
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="menu-item"><a href="#">Menu-item-1</a>
<div class="dropdown">
<div class="col">
<ul>
<li>menu-item: 1.1</li>
<li>menu-item: 1.2
<div class="sub-col">
<ul>
<li>menuitem1.2.1</li>
<li>menuitem1.2.2
<div class="sub-sub-col">
<ul>
<li>menuitem1.2.2.1</li>
<li>menuitem1.2.2.2
<div class="sub-sub-sub-col">
<ul>
<li>menuitem1.2.2.2.1</li>
<li>menuitem1.2.2.2.2</li>
</ul>
</div>
</li>
</ul>
</div><!--sub-sub-col-->
</li>
</ul>
</div><!--sub-col-->
</li>
</ul>
</div> <!--col-->
</div><!--dropdown-->
</li>
<li class="menu-item"><a href="#">Menu-item-2</a></li>
</ul>
点击： 1。 2>菜单项-1.2.2 –