引導3展開手風琴從URL

使用引導3，我試圖使用子導航錨點鏈接（即index.php＃wnsh）來展開指定的手風琴，並將頁面錨定到內容。我嘗試過尋找例子，但運氣很差，可能是因爲我的手風琴結構與給定的BS3例子不同。這裏是我的HTML：引導3展開手風琴從URL

UPDATE：

做了一些更新的代碼，但它仍然是不開放的哈希指定的手風琴。還有什麼想法？

  <div id="accordion" class="accordion-group">     
       <div class="panel"> 
        <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4> 
        <div id="cs_c" class="accordion-collapse collapse in"> 
         <p>...</p> 
        </div> 

        <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4> 
        <div id="chgd_c" class="accordion-collapse collapse"> 
         <p>...</p> 
        </div> 

        <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4> 
        <div id="wmnh_c" class="accordion-collapse collapse"> 
         <p>...</p> 
        </div> 
       </div> 
      </div>

var elementIdToScroll = window.location.hash; 

if(window.location.hash != ''){ 
    $("#accordion .in").removeClass("in"); 
    $(elementIdToScroll).addClass("in"); 
    $('html,body').animate({scrollTop: $(elementIdToScroll).offset().top},'slow'); 
}

在此先感謝。任何幫助，將不勝感激。

來源

2014-03-07 robotsmeller

你錯過了[轉換插件（http://getbootstrap.com/javascript/#collapse），因爲它工作正常，我。請參見[this fiddle]（http://jsfiddle.net/S39Q7/） –

Transition插件在那裏。我正嘗試通過url標籤打開特定的手風琴，如page.html＃cs。實際的手風琴功能適合我。 – robotsmeller

我認爲你可以編寫在頁面上運行的JavaScript。你可以使用'window.location.hash'獲得哈希標籤，並做一些類似於[更新的小提琴]（http://jsfiddle.net/S39Q7/2/） –

就在幾分鐘前我遇到了同樣的問題。該解決方案似乎是直截了當 - 你需要解析的URL並添加in類的可匹配手風琴，利用其ID：

// Opening accordion based on URL 
var url = document.location.toString(); 
if (url.match('#')) { 
    $('#'+url.split('#')[1]).addClass('in'); 
}

測試和引導3.1.1工作。

來源

2014-06-13 08:53:50

這可以幫助我，但我會補充說： var url = document.location.toString（）; （'＃'））{（'＃'+ url.split（'＃'）[1]）。collapse（'show'）; } 獲得javascript效果。 – dumP

我們沒有使用'window.location.hash'的任何特定原因？ – Lazarus

@dumP你是什麼意思「獲得JavaScript效果」。什麼影響？ – bart

只是對Ilia R's的迴應。他的解決方案非常棒！但唯一的事情是，面板標題樣式沒有更新（需要從面板標題鏈接中刪除.collapsed類），所以我調整了Ilia R的代碼。有人可能有更好的/更清潔的解決方案，但這是一個開始。

 $(document).ready(function() { 
      var url = document.location.toString(); 
      if (url.match('#')) { 
       $('#'+url.split('#')[1]).addClass('in'); 
       var cPanelBody = $('#'+url.split('#')[1]); 
       var cPanelHeading = cPanelBody.prev(); 
       cPanelHeading.find(".panel-title a").removeClass('collapsed'); 
      } 
     });

來源

2015-06-17 21:03:46

我在Yii2中使用了Collapse小部件。爲您的面板分配一個ID。
如果你有純html，你可以添加一個id到你的a-tag並更新選擇器。

$(function(){ 
    var hash = document.location.hash; 
    if (hash) { 
     $(hash).find('a').click(); 
    } 
});

來源

2015-10-26 10:59:43 Ruben

測試並在Bootstrap中工作3.3.5。

<script type="text/javascript"> 
$(document).ready(function() { 
    if(location.hash != null && location.hash != ""){ 
     $('.collapse').removeClass('in'); 
     $(location.hash + '.collapse').collapse('show'); 
    } 
}); 
</script>

來源

2015-10-30 20:42:01

爲我工作：

$(document).ready(function() { 
     var url = document.location.toString(); 
     if (url.match('#')) { 
      var cPanelBody = $('#'+url.split('#')[1]); 
      cPanelBody.find(".panel-title a")[0].click(); 
     } 
    });

來源

2018-01-24 16:35:36 Jafix

引導3展開手風琴從URL

回答

相關問題