データの親属性が折りたたみで動作していないbootstrap v4-alpha

Question

2番目をクリックして最初の折り畳み可能な要素を閉じたいが、機能していない。

<div class="row"> 
    <div class="col-md-12"> 
    <div id="advancedOptions"> 
     <p class="advanced-search-options ml-1"> 
     <a role="tab" data-toggle="collapse" data-parent="#advancedOptions" href="#advancedSearchOptions" aria-expanded="false" aria-controls="advancedSearchOptions">Advanced search options</a> 
     or browse by 
     <a role="tab" data-toggle="collapse" data-parent="#advancedOptions" href="#areaList" aria-expanded="false" aria-controls="areaList">area list</a> 
     </p> 

     <div class="collapse" id="advancedSearchOptions" aria-labelledby="advancedSearchOptions"> 
     Advanced Search Options 
     </div> 
     <div class="collapse" id="areaList" aria-labelledby="areaList"> 
     Area List 
     </div> 
    </div> 
    </div> 
</div> 

JSFiddle：https://jsfiddle.net/Lppf5r2z/

Answer 1

ただ単にcollapse開いているすべてを非表示にする必要があなたの中にあなたのa[role="tab"]にクリックイベントを追加します。

$('a[role="tab"]').on('click',function(){ 
    $('.collapse').collapse('hide'); 
}); 

UPDATED FIDDLE

Answer 2

このコードに従ってください。

Htmlの

<div class="row"> 
    <div class="col-md-12"> 
    <div id="advancedOptions"> 
     <p class="advanced-search-options ml-1"> 
     <a role="tab" data-toggle="collapse" data-parent="#advancedOptions" href="#advancedSearchOptions" class="link-data" aria-expanded="true" aria-controls="areaList">Advanced search options</a> 
     or browse by 
     <a role="tab" data-toggle="collapse" data-parent="#advancedOptions" href="#areaList" class="link-data" aria-expanded="false" aria-controls="advancedSearchOptions">area list</a> 
     <a role="tab" data-toggle="collapse" data-parent="#advancedOptions" href="#areaList1" class="link-data" aria-expanded="false" aria-controls="advancedSearchOptions">area list 1</a> 
     </p> 

     <div class="collapse div-custom" id="advancedSearchOptions" aria-labelledby="advancedSearchOptions"> 
     Advanced Search Options 
     </div> 
     <div class="collapse div-custom" id="areaList" aria-labelledby="areaList"> 
     Area List 
     </div> 
     <div class="collapse div-custom" id="areaList1" aria-labelledby="areaList"> 
     Area List 123 
     </div> 
    </div> 
    </div> 
</div> 

のjQuery：

$(document).ready(function(){ 
     var hide_id = ""; 
     $(".link-data").click(function() { 
      if(hide_id != null && hide_id != ''){ 
       $(hide_id).hide('slow'); 
      } 
      hide_id = $(this).attr("href"); 
     }); 
    }); 

それとも、あなたはこのコードを経由して行うことができます。

あなただけ クラス=「リンク・データ」を追加する必要があり、このHTMLコード内

$(".link-data").click(function() { 
    $('.collapse').collapse('hide'); 
}); 

<a role="tab" data-toggle="collapse" data-parent="#advancedOptions" href="#advancedSearchOptions" class="link-data" aria-expanded="true" aria-controls="areaList">Advanced search options</a> 

最後のオプションは、最初の1、その後、より良いです。