单击第三层菜单项后如何关闭以下CSS+js下拉菜单。现在,当我单击菜单外的任何地方时,它将关闭。我想单击第三层菜单以关闭菜单。
这是一个小提琴的例子。
网页代码:
<ul class="dropdown">
<li><a href="#">Please select</a>
<ul class="sub_menu">
<li>
<a href="#">Artificial Turf</a>
<ul>
<li><a href="#" class="subMenu">Indoor</a></li>
<li><a href="#" class="subMenu">Outdoor</a></li>
</ul>
</li>
<li>
<a href="#">Batting Cages</a>
<ul>
<li><a href="#" class="subMenu">Indoor</a></li>
<li><a href="#" class="subMenu">Outdoor</a></li>
</ul>
</li>
</ul>
</li>
</ul
CSS代码:
/*
LEVEL ONE
*/
ul.dropdown { position: relative;color:#333;z-index: 9999; }
ul.dropdown li { font-weight: bold; float: left; zoom: 1; position: relative; }
ul.dropdown li a { display: block; padding: 8px 8px;color:#333;text-decoration:none;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,ul.dropdown li:hover { background: #CCC; position: relative; text-decoration: none;}
/*
LEVEL TWO
*/
ul.dropdown ul { width: 140px; visibility: hidden; position: absolute; top: 100%; left: 0px;margin-top:0px; font-size: 12px;margin:0px;border: 1px solid #999;}
ul.dropdown ul li { font-weight: normal; background: #E5E5E5; color: #000;border-bottom: 1px solid #ccc; float: none; margin:0px;padding:0px;padding-left:5px;}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block;margin:0px; padding: 8px 0px;text-decoration:none;}
/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100%; top: 0; max-height: 380px; overflow: auto;width:200px;}
Javascript代码:
$(".dropdown li").click(function() {
$(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" });
$(this).children("ul").css({ "visibility":"visible" });
})
$('html').click(function() {
$(".dropdown ul").css({ "visibility":"hidden" });
});
$('.dropdown').click(function(event){
event.stopPropagation();
});
# this one not working
$('.subMenu').click(function(event) {
$(".dropdown ul").css({ "visibility":"hidden" });
event.preventDefault();
});
尝试添加此函数。
$('.dropdown ul ul li a').click(function(event) {
$(".dropdown ul").css({ "visibility":"hidden" });
event.stopPropagation();
});
它将在单击第三层时关闭它,并且 event.stopPropagation() 将再次禁用重新打开它。
这是更新的小提琴
而不是在CSS
中使用visibility:hidden
,您可以使用display:hidden
,然后使用hide()
方法,然后使用jQuery
中的和show()
方法,如下所示:
现场演示:
http://jsfiddle.net/oscarj24/panzd/13/
那么,这只是唯一改变的部分...
$('.dropdown').on('click', '.subMenu', function(event) {
$(".dropdown ul").hide();
event.preventDefault();
});