单击另一个元素时如何关闭另一个元素

SKi 发表于 Dev

滑雪

单击链接时，我试图显示一个菜单，如果打开了另一个菜单，则在显示另一个菜单之前将其关闭。换句话说，就像手风琴菜单一样，但是我一次只需要打开一个菜单。到目前为止，我尝试的所有操作均无效。我不太了解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');
});

阿伦·P·约翰尼（Arun P Johny）

这是一个经典的手风琴实现，您可以进行如下调整。

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] 删除。