gpt4 book ai didi

javascript - Jquery 菜单 ul 切换

转载 作者:太空宇宙 更新时间:2023-11-04 04:51:34 25 4
gpt4 key购买 nike

我有这个菜单:

           <ul id="submenu" class="clearfix">
<li><a href="javascript:void(0)">Vedella</a></li>
<li><a href="javascript:void(0)">Minis de vedella</a></li>
<li><a href="javascript:void(0)">Vaca</a></li>
<li><a href="javascript:void(0)">Poltre</a></li>
<li><a href="javascript:void(0)">Porc Ibèric</a></li>
<li><a href="javascript:void(0)">Pollastre</a></li>
<li><a href="javascript:void(0)">Gall d´indi</a></li>
<li><a href="javascript:void(0)">Bou</a></li>
</ul>

每个“#submenu”li 淡入一个 ul 子列表并隐藏其他子列表。

这是子列表:

            <ul class="sublist first_sublist">
<li><a href="javascript:void(0)">Normal </a></li>
<li><a href="javascript:void(0)">All i Julivert</a></li>
<li><a href="javascript:void(0)">Formatge Roquefort</a></li>
<li><a href="javascript:void(0)">Ceba</a></li>
</ul>

<ul class="sublist second_sublist">
<li><a href="javascript:void(0)">Mini-Hamburgueses</a></li>
<li><a href="javascript:void(0)">Surtit Mini-Hamburgueses</a></li>
</ul>

<ul class="sublist third_sublist">
<li><a href="javascript:void(0)">Normal</a></li>
</ul>

<ul class="sublist fourth_sublist">
<li><a href="javascript:void(0)">Poltre</a></li>
</ul>

<ul class="sublist fifth_sublist">
<li><a href="javascript:void(0)">Porc ibèric de Gla</a></li>
</ul>

和这个 CSS:

    .second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
display: none;
}

使用这个脚本:

$('#submenu li').click{
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});

脚本的问题是,如果我有五个子列表,它会变得更大,因为我必须让每个“#submenu”li 都具有点击功能。

谁能帮我简化一下?

最佳答案

使用class而不是id来绑定(bind)事件,这样你就不需要id来绑定(bind)点击事件了。

$('.clearfix li').click(function(){
$('#submenu li').removeClass('active');
$(this).addClass('active');
$('.sublist.second_list').hide();
$('.sublist.first_list').fadeIn();
});

关于javascript - Jquery 菜单 ul 切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13383668/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com