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/

你想建立一种手风琴面板？ –

@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

答

请点击此代码。

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

最后的选择是更好然后第一个。

data-parent属性不工作在崩溃引导程序v4-alpha

相关推荐