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 –