请看这个 fiddle http://jsfiddle.net/rabelais/tw6sdod9/
$(document).ready(function() {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function() {
$('ul#inner-li ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
$('#nav li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
$(document).ready(function() {
$('li ul#inner-li-texts').slideDown(0);
$('.no-js li a#texts').on("click", function() {
$('ul ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
<li class="caps"><a href="#">Works</a>
<ul id="inner-li">
<li><a href="blog.html">blog</a>
</li>
<li><a href="portraits.html">Portraits</a>
</li>
<li><a href="paintings.html">Paintings</a>
</li>
<li><a href="drawings.html">Drawings</a>
</li>
<li><a href="photography.html">Photography</a>
</li>
</ul>
</li>
<li class="caps"><a id="texts" href="#">Texts</a>
<ul id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a>
</li>
<li><a href="#essay-two">Essay two</a>
</li>
<li><a href="#essay-three">Essay three</a>
</li>
</ul>
</li>
<li class="caps"><a href="../news.htm">News</a>
</li>
<li class="caps"><a href="../biography.htm">Biography</a>
</li>
</ul>
在这个 fiddle 上有一个菜单,其中两个子菜单隐藏在“作品”和“文本”链接下。
我想要实现的是:
- 加载时,我希望打开文本子菜单并关闭作品菜单。
- 当用户点击链接时,该链接的子菜单打开或关闭。
$(document).ready(function () {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function () {
$('ul#inner-li ul').slideUp(400);
if($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
最佳答案
更新了 Jsfiddle
HTML
<ul class="no-js">
<li class="caps"><a class="alink" href="#">Works</a>
<ul class="cls" id="inner-li">
<li><a href="blog.html">blog</a></li>
<li><a href="portraits.html">Portraits</a></li>
<li><a href="paintings.html">Paintings</a></li>
<li><a href="drawings.html">Drawings</a></li>
<li><a href="photography.html">Photography</a></li>
</ul></li>
<li class="caps"><a id="texts" class="alink" href="#">Texts</a>
<ul class="cls" id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a></li>
<li><a href="#essay-two">Essay two</a></li>
<li><a href="#essay-three">Essay three</a></li>
</ul>
</li>
<li class="caps"><a class="alink" href="../news.htm">News</a></li>
<li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>
</ul>
脚本
$(document).ready(function () {
$('ul.cls').slideUp(0);
$('a.alink').on("click", function () {
$(this).next("ul.cls").slideToggle(400);
});
});
为我工作
希望这对您有所帮助。
关于javascript - 使用 jQuery 打开和关闭的多个隐藏菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28743617/