Question

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

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

这是我的代码：

＆＃13;

  
  $(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";
        } 
      }
    }
    });

＆＃13;

    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;
    }

＆＃13;

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>

＆＃13;

Answer 1

达，因此，为了将事情分解得更清洁，您应该将HTML / JS / CSS分成所有单独的文件。然后只需通过链接标记将CSS注入HTML，然后通过脚本标记注入相同的JS。这主要是语义，但也可能是您的错误的原因。它确实看起来像你正在加载你的JS虽然在你的HTML结束时很好，所以你的HTML在JS加载之前已经解析了。

所以我会失去你所缺少的是

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

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

Bootstrap可折叠在第一次使用后无法正常工作

1 个答案: