单击链接时,我试图显示一个菜单,如果打开了另一个菜单,则在显示另一个菜单之前将其关闭。换句话说,就像手风琴菜单一样,但是我一次只需要打开一个菜单。到目前为止,我尝试的所有操作均无效。我不太了解Jquery,但是我将发布到目前为止的代码。
的HTML
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
<li><a title="" href="#3">3</a></li>
<li><a title="" href="#4">4</a></li>
<li><a title="" href="#5">5</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="1">
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="2">
<li><a title="" href="">2a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="3">
<li><a title="" href="">3a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="4">
<li><a title="" href="">4a</a></li>
</ol>
</nav>
<nav class="sub">
<ol id="5">
<li><a title="" href="">5a</a></li>
</ol>
</nav>
jQuery查询
$('.sub').hide();
$('#cat > ol > li > a').click(function(){
var hrefSuffix = $('a').attr('href').split('#')[1];
$('.sub > ol').attr(hrefSuffix).slideDown('slow');
$('.sub').find('ol[id=' + hrefSuffix ']').slideUp('slow');
});
这是一个经典的手风琴实现,您可以进行如下调整。
var $subs = $('.sub');
$('#cat > ol > li > a').click(function() {
var href = $(this).attr('href'),
$target = $(href);
$target.stop().slideToggle('slow');
$subs.not($target).stop().slideUp('slow');
});
.sub {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="cat">
<ol>
<li><a title="" href="#1">1;</a></li>
<li><a title="" href="#2">2</a></li>
<li><a title="" href="#3">3</a></li>
<li><a title="" href="#4">4</a></li>
<li><a title="" href="#5">5</a></li>
</ol>
</nav>
<nav class="sub" id="1">
<ol>
<li><a title="" href="">1a</a></li>
</ol>
</nav>
<nav class="sub" id="2">
<ol>
<li><a title="" href="">2a</a></li>
</ol>
</nav>
<nav class="sub" id="3">
<ol>
<li><a title="" href="">3a</a></li>
</ol>
</nav>
<nav class="sub" id="4">
<ol>
<li><a title="" href="">4a</a></li>
</ol>
</nav>
<nav class="sub" id="5">
<ol>
<li><a title="" href="">5a</a></li>
</ol>
</nav>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句