我希望当用户单击一个下拉菜单时所有其他打开的下拉菜单都处于关闭状态。我在谷歌中寻找答案，但这对我的下拉菜单不起作用，我知道这很简单，但是我无法帮助我！
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
<a href="javascript:void(0);" class="hh_sf">Chemicals</a>
<ul class="hh_inner">
<li><a href="#">Additives / Boosters</a></li>
<li><a href="#">Anti-Allergen</a></li>
<li><a href="#">Concrete</a></li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li><a href="#">Deodorization</a></li>
<li><a href="#">Duct Cleaning Equipment</a></li>
<li><a href="#">Hard Surface</a></li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li><a href="#">Bonnets/Pads</a></li>
<li><a href="#">Brush/Rake/Sponge</a></li>
<li><a href="#">Carpet Rakes</a></li>
</ul>
</li>
</ul>
</div>
我在这使用的jQuery：
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>
试试这个：
HTML：
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
<a href="javascript:void(0);" class="hh_sf">Chemicals</a>
<ul class="hh_inner expanded">
<li><a href="#">Additives / Boosters</a></li>
<li><a href="#">Anti-Allergen</a></li>
<li><a href="#">Concrete</a></li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li><a href="#">Deodorization</a></li>
<li><a href="#">Duct Cleaning Equipment</a></li>
<li><a href="#">Hard Surface</a></li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li><a href="#">Bonnets/Pads</a></li>
<li><a href="#">Brush/Rake/Sponge</a></li>
<li><a href="#">Carpet Rakes</a></li>
</ul>
</li>
</ul>
</div>
jQuery的：
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句