Question

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

Answer 1

在打开的菜单项上添加类，然后，当您打开另一个项目时，通过添加的类找到上一个，隐藏它并删除类。

$(.menu-item).on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var $this = $(this);
    if($this.hasClass('opened')){
        return;
    }
    $('.opened').slideUp('slow').removeClass('opened');
    $this.slideDown('slow').addClass('opened');
});

Answer 2

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

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>

Answer 3

在您的情况下，手风琴需要像这样

HTML：

<ul class="accordion">
    <li>
        <a href="javascript:void(0);">First Item</a>
        <div class="panel">
            <p>First Item content goes here</p>
        </div>
    </li>
    <li>
        <a href="javascript:void(0);">Seccond Item</a>
        <div class="panel">
            <p>Seccond Item content goes here</p>
        </div>
    </li>
    <li>
        <a href="javascript:void(0);">Third Item</a>
        <div class="panel">
            <p>Third Item content goes here</p>
        </div>
    </li>
</ul>

CSS：

.accordion{padding:0px;margin:0px;list-style:none;}
.accordion li{margin-bottom:5px;}
.accordion a{padding:10px;background:#eaeaea;display:block;}
.accordion .panel{display:none;}

JS：

$(document).ready(function(){
    $(".accordion a").on('click', function(){
        var $allPanel = $(".accordion .panel");
        var $currentPanel = $(this).next('.panel');
        if($currentPanel.is(":hidden")){
            $(this).next('.panel').slideDown('fast');
        }else{
            $(this).next('.panel').slideUp('fast');   
        }
        $allPanel.not($currentPanel).slideUp('fast');
    });
});

创建了一个小提琴here，希望这是你需要的。

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

3 个答案: