我希望用户点击一个DropDown所有其他打开DropDown关闭。我在谷歌寻找答案,但这不适用于我的下拉菜单我知道它很简单,但我无法帮助我!
<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>
答案 0 :(得分:1)
试试这个:
<强> 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>
答案 1 :(得分:0)
我使用显示和隐藏功能打开了菜单,并在您可以使用其他方式创建事件
尝试:
JQuery:
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );