我有一些代码,单击该代码可展开下拉菜单,以显示一组链接。共有三个不同的下拉菜单,每个下拉菜单都有一组不同的链接,这些链接在用户单击时显示。
该脚本在下面,但不是动态的。有什么更好,更有效的脚本编写方法,因此当需要其他下拉菜单时,我不需要添加脚本?
$(".button-nav1").click(function() {
$(".row1").toggle();
});
$(".button-nav2").click(function() {
$(".row2").toggle();
});
$(".button-nav3").click(function() {
$(".row3").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lorem Lipsum</a>
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lipsum </a>
</li>
<li><a href="#">Loremu</a>
</li>
<li><a href="#">Lipsum</a>
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lorem Lipsum</a>
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lipsum </a>
</li>
<li><a href="#">Loremu</a>
</li>
<li><a href="#">Lipsum</a>
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lorem Lipsum</a>
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lipsum </a>
</li>
<li><a href="#">Loremu</a>
</li>
<li><a href="#">Lipsum</a>
</li>
</ul>
</ul>
</div>
</div>
您可以将jquery简化为一个函数。首先侦听div
具有button-nav
以$("div[class^=button-nav]")
查询开头的类的。然后得到的id
和改变任何类是id
与$("."+$(this).attr('id')).toggle();
$("div[class^=button-nav]").on('click',function() {
$("."+$(this).attr('id')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lorem Lipsum</a>
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lipsum </a>
</li>
<li><a href="#">Loremu</a>
</li>
<li><a href="#">Lipsum</a>
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lorem Lipsum</a>
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lipsum </a>
</li>
<li><a href="#">Loremu</a>
</li>
<li><a href="#">Lipsum</a>
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lorem Lipsum</a>
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li><a href="#">Lipsum </a>
</li>
<li><a href="#">Loremu</a>
</li>
<li><a href="#">Lipsum</a>
</li>
</ul>
</ul>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句