Bootstrap 可折叠在第一次后不起作用

Question

我正在使用 PERSONA 作为 CMS 制作网站，并通过 Bootstrap 在页面上包含可折叠元素。我已经包含了 Bootstrap 版本 3.3.7 并且 PERSONA 带有 Jquery 的内部版本。你可以在这里查看网站： https://agdraft3.persona.co/

可折叠部分在第一次或刷新后正常工作，但是当我单击折叠元素内的链接然后返回时，它会冻结，直到我刷新。引发的唯一错误是与包含 vimeo 嵌入相关的错误，并且搜索未显示任何结果。

这是我的代码：

  
  $(document).ready(function(){
    	var acc = document.getElementsByClassName("accordion");
    var i;
    
    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      }
    }
    });

    button.accordion {
        background-color: rgba(255, 255, 255, 0);
        color: #444;
        cursor: pointer;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }
    
    button.accordion.active, button.accordion:hover {
        background-color: #ffffff;
    }
    
    div.panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

HTML

    <button class="accordion active">
     <h2 class="collapse">Current</h2></button>
      <div class="panel">
       <div class="indent">
        <h2 class="current">
          <a href="Weird-Seeds" rel="history">Weird Seeds</a>
        </h2>
        <h2>(2017)</h2>
        <small>Weird Seeds is a community of artists &amp; scholars who tell stories about ecology, memory, and power.</small>=
     </div>
    </div>



 

Answer 1

大， 所以为了把事情分解得更干净一点，你应该把你的 HTML/JS/CSS 分成所有单独的文件。然后只需通过链接标签将 CSS 注入您的 HTML，然后通过脚本标签注入您的 JS。这主要是语义，但也可能是您的错误的原因。看起来你确实在加载你的 JS，虽然在你的 HTML 的末尾这很好，所以你的 HTML 在 JS 加载之前已经被解析。

所以我认为你缺少的是

<script src="../node_modules/jquery/dist/jquery.min.js"></script>

我根本看不到 jQuery 的加载位置，看起来很困惑。如果它工作一次，那将是我的猜测。