單擊特定選項卡時，如何隱藏在手風琴菜單項中打開的所有選項卡？

Question

我有一個要求，當我單擊任何選項卡時，它的工作方式就像手風琴菜單選項卡一樣，但是這里的一個問題是，當我單擊任何其他選項卡時，應該關閉打開的選項卡，而僅顯示與選項卡相關的當前內容，如html我提到的僅是示例，實際上id和div是動態生成的。 我還要插入圖片以便更好地理解。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"/> <script> $(document).ready(function(){ // Get all the links. var link = $("#vy_accordion a"); // On clicking of the links do something. link.on('click', function(e) { e.preventDefault(); var a = $(this).attr("href"); $(a).slideToggle('fast'); $(".control-group").css({ 'display' : 'block', 'margin-bottom' : '0' }); }); }); </script> 

 #vy_accordion { margin-top: 10px; border: thin solid #cecece; border-top: none; border-bottom: none; } #vy_accordion div { background: white; /*height: inherit; line-height: inherit;*/ display: none; border-bottom: thin solid #cecece; padding-left: 15px; min-height: 70px; } a.divlink { display: block; /* width: 483px; */ background: #f4f4f4; background-image: -webkit-linear-gradient(white, #ededed); background-image: -moz-linear-gradient(white, #ededed); background-image: -o-linear-gradient(white, #ededed); background-image: -ms-linear-gradient(white, #ededed); background-image: linear-gradient(white, #ededed); color: #959696; padding-left: 15px; height: 40px; line-height: 40px; text-decoration: none; border-bottom: thin solid #cecece; border-top: thin solid #cecece; font-family: Arial; font-size: 13px; font-weight: bold; text-shadow: 0px 1px 1px white; } 

 <a class="divlink" href="#Menu-hover-color">Menu-hover-color</a> <div id="Menu-hover-color" style="display: none;"> <div class="control-group"> <label class="control-label" for="_156_Menu-hover-color"> Menu-hover-color </label> <input class="field" id="_156_Menu-hover-color" name="" type="text" value="#B3E5FC"> </div> </div> <a class="divlink" href="#Menu-hover-color">Menu-item-color</a> <div id="Menu-item-color" style="display: none;"> <div class="control-group"> <label class="control-label" for="_156_Menu-item-color"> Menu-hover-color </label> <input class="field" id="_156_Menu-item-color" name="" type="text" value="#B3E5FC"> </div> </div> 

Answer 1

在顯示單擊/選定的選項卡之前，將類似的類添加到選項卡（例如linkTab ），並基於此類選擇器調用hide() ，如下所示：

HTML：

<a class="divlink" href="#Menu-hover-color">Menu-hover-color</a>
    <div class="linkTab" id="Menu-hover-color" style="display: none;">
...

JS：

var link = $("#vy_accordion a");

// On clicking of the links do something.
link.on('click', function(e) {
    e.preventDefault();

    var a = $(this).attr("href");

    // this line will hide all open tab based on class selector
    $('.linkTab').hide();

    $(a).slideToggle('fast');

    $(".control-group").css({ 'display' : 'block', 'margin-bottom' : '0' });

});

DEMO