引导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

回答

相关问题