data-parent屬性不工作在崩潰引導程序v4-alpha

我想關閉第一個可摺疊元素後點擊第二，但它不工作。data-parent屬性不工作在崩潰引導程序v4-alpha

<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/

來源

2017-07-18 Darpan

你想建立一種手風琴面板？ –

@GuruprasadRao檢查https://jsfiddle.net/Lppf5r2z/它應該像手風琴一樣工作。 – Darpan

手風琴基本上是用** [這種方式]完成的（https://v4-alpha.getbootstrap.com/components/collapse/#accordion-example）** AFAIK。所以對於目前的實現，我懷疑你可能需要寫一些jQuery代碼來實現這一點。你介意如果你用jQuery完成它嗎？ –

只需一個點擊事件添加到您的a[role="tab"]凡在你只需要隱藏所有打開的collapse。

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

UPDATED FIDDLE

來源

2017-07-18 05:54:57

請點擊此代碼。

的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"); 
     }); 
    });

或者你可以通過你的代碼做。

$(".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>

最後的選擇是更好然後第一個。

來源

2017-07-18 05:55:21

data-parent屬性不工作在崩潰引導程序v4-alpha

回答

相關問題