Question

我正在使用twitter-Bootstrap 2.04，而我正在使用最新的jQuery。我正在尝试建立一个从一个页面到包含此手风琴的页面的链接，然后激活相应的手风琴部分。这是手风琴：

 <div class="accordion-group">
          <div class="accordion-heading">
            <a name="Alink1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
            <strong>Title</strong>
            </a>
          </div>
          <div id="collapseOne" class="accordion-body in collapse" style="height: auto; ">
            <div class="accordion-inner">
             some random content
            <div>
          </div>
 </div>
 <div class="accordion-group">
          <div class="accordion-heading">
            <a name="Alink2" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
            <strong>Title 2</strong>
            </a>
          </div>
          <div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
            <div class="accordion-inner">
             some random content 2
            <div>
          </div>
 </div>

这是链接：

  <a href="page.html/#Alink2">Link to some interesting stuff</a>

通常链接到页面中的一点点工作正常，我是否需要使用Javascript来激活它？

Answer 1

是的，您需要在页面加载时手动激活它。以下内容应该有效：

$(document).ready(function () {
  location.hash && $(location.hash + '.collapse').collapse('show');
});

此外，正如@SaadImran指出的那样，这假定您链接到可折叠元素id（例如，#collapseTwo）而不是锚中的名称（例如，#Alink2）。< / p>

Answer 2

感谢您的帮助。
我添加了功能，以便代码可以打开Accordions WITHIN Accordions：

$(document).ready(function () {
  if (location.hash){
    $(location.hash).collapse('show');
    $(location.hash).parents('.accordion-body').collapse('show');
  }
});

Answer 3

您可以使用手风琴部分的位置。以下链接打开twitter bootstrap（wordpress）手风琴上的第三个手风琴部分。

链接示例：http://www.zfp-bauwesen.de/leistungen/ubersicht#3

Javscript代码：

$( document ).ready(function() {

 if (window.location.hash) {
   var AccordionSectionNumber = window.location.hash.substring(1);
   AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href')
      if (! (typeof AccordionBodyID === "undefined")) {
        $(AccordionBodyID).collapse('show');
        return true;
      }
    }

});

Answer 4

你试过这个：

<a href="page.html#Alink2">Link to some interesting stuff</a>

从另一页链接到手风琴的一部分

4 个答案: