从不同的页面定位 Bootstrap 手风琴

Question

我有一个带有 Bootstrap 手风琴的页面。我想链接到另一页的特定选项之一。因此，当访问者单击此链接时，它将加载手风琴页面并自动打开正确的选项。

因此，在我的链接页面上，我有一个以标签 #collapseGeneralThree 结尾的 href 链接。我的示例代码如下所示：

<div id="accordionGeneral" class="accordion">
<div class="accordion-item" itemscope="itemscope" itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 id="headingGeneralOne" class="accordion-header" itemprop="name">
        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGeneralOne" aria-expanded="false" aria-general="collapseGeneralOne">GeneralOne Title</button>
    </h2>
    <div id="collapseGeneralOne" class="accordion-collapse collapse" itemscope="itemscope" itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="headingGeneralOne" data-bs-parent="#accordionGeneral">
        <div class="accordion-body" itemprop="text">GeneralOne Content.</div>
    </div>
</div>
<div class="accordion-item" itemscope="itemscope" itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 id="headingGeneralTwo" class="accordion-header" itemprop="name">
        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGeneralTwo" aria-expanded="false" aria-general="collapseGeneralTwo">GeneralTwo Title</button>
    </h2>
    <div id="collapseGeneralTwo" class="accordion-collapse collapse" itemscope="itemscope" itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="headingGeneralTwo" data-bs-parent="#accordionGeneral">
        <div class="accordion-body" itemprop="text">GeneralTwo Content.</div>
    </div>
</div>
<div class="accordion-item" itemscope="itemscope" itemtype="https://schema.org/Question" itemprop="mainEntity">
    <h2 id="headingGeneralThree" class="accordion-header" itemprop="name">
        <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseGeneralThree" aria-expanded="false" aria-general="collapseGeneralThree">GeneralThree Title</button>
    </h2>
    <div id="collapseGeneralThree" class="accordion-collapse collapse" itemscope="itemscope" itemtype="https://schema.org/Answer" itemprop="acceptedAnswer" aria-labelledby="headingGeneralThree" data-bs-parent="#accordionGeneral">
        <div class="accordion-body" itemprop="text">GeneralThree Content.</div>
    </div>
</div>

然后我在这个页面上运行了一段 Javascript，就放在标签的正上方：

    // Opens accordion automatically if an accordion target is accessed from another page
    // Assumes the accordion-group is the target linked to
    function openAnchorAccordion() {
    if (window.location.hash) {
    var jQuerytarget = jQuery('body').find(window.location.hash);
    //console.log( jQuerytarget );
    if (jQuerytarget.hasClass('collapse')) {
    var jQuerytargetAccordion = jQuerytarget.find('.collapse');
    console.log( jQuerytargetAccordion );
    jQuerytarget.collapse('show');
    }
    }
    }
    openAnchorAccordion();

如果找到正确的标签，我可以在控制台日志中看到，但无法弄清楚为什么不将显示类添加到相关的 div。

谁能帮忙？

谢谢

Answer 1

我认为问题出在jQuerytarget下面试试

function openAnchorAccordion() {
  if (window.location.hash) {
    var jQuerytarget = jQuery('body').find(window.location.hash);
    if (jQuerytarget.hasClass('collapse')) {
      var jQuerytargetAccordion = jQuerytarget.closest('.accordion-item');
      console.log( jQuerytargetAccordion );
      jQuerytargetAccordion.find('.collapse').collapse('show');
    }
  }
}
openAnchorAccordion();