我已经创建了下拉菜单,以便当用户单击列表菜单时将出现一个下拉菜单。我想要做的是在用户单击其他任何位置时隐藏下拉菜单。感谢您的宝贵时间。
这是我的代码:
的HTML
<div class="container">
<div id='cssmenu'>
<ul>
<li id="woman-li"><a href="#"> <span>Woman</span> </a> </li>
<li id="man-li"><a href="#"> <span>Man</span> </a> </li>
<li id="health-li"><a href="#"> <span>Health</span> </a> </li>
</ul>
</div>
<div class="drop-down">
<div id='woman'>
<h1>Woman</h1>
</div>
<div id='man'>
<h1>Man</h1>
</div>
<div id='health'>
<h1>Health</h1>
</div>
</div>
</div>
的CSS
.container{
margin-left: 10%;
margin-right: 10%;
}
.drop-down{
border-top: none!important;
border: 1px solid rgba(151, 151, 151, 0.98);
margin-bottom: 2.618em;
}
.drop-down #woman, .drop-down #man, .drop-down #health, .drop-down #device,.drop-down #living{
display: none;
}
JS
var hideall = $('#woman,#man,#health');
$('#woman-li').click(function () {
$( hideall ).hide(),$('#woman').show();
});
$( "#man-li" ).click(function() {
$( hideall ).hide(),$('#man').show();
});
$( "#health-li" ).click(function() {
$( hideall ).hide(),$('#health').show();
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句