單擊另一個元素時如何關閉另一個元素

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');
    });
});

在這里創建了一個小提琴，希望這是您所需要的。