单击按钮时按钮打开并跳转手风琴

Question

我其实之前问过这个问题，但我没有得到我真正想要的。

回到我的老话题

适用于此网站：http://n-p-cain.com/schedule.html

我希望，如果您点击“日期” “事件菜单部分”中的按钮您将跳转到“事件列表”中的该日期并且还将打开手风琴，现在手风琴保持关闭状态（如果我命名 class=“accordion-link1”或者如果您单击“事件菜单”中的按钮，手风琴将打开，但您不会跳转到它（如果我使用下面的代码）。

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

        }

      }

    }

    // get list of links by class

    var links = document.getElementsByClassName("accordion-link");

    var linksLength = links.length;

    for(var i=0; i < linksLength; i++){

      links[i].onclick = function(e){

        // preventDefault is probably optional

        // depending on your application

        e.preventDefault();

        // isolate the hash

        var hash = e.target.hash;

        // remove # from hash

        hash = hash.substring(1, hash.length);

        // select by id using hash

        document.getElementById(hash).click();

      }

    } 

  

@charset "utf-8";

/* CSS Document */

 /* Style the buttons that are used to open and close the accordion panel */

button.accordion {

    background-color: #020725;

    color: #FFF;

  font-weight: bolder;

    cursor: pointer;

    padding: 10px;

  margin: 0px 5px 0px 5px;

    width: 98%;

    text-align: left;

    border: none;

    outline: none;

    transition: 0.4s;

  border-radius: 5px;

}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

button.accordion.active, button.accordion:hover {

    background-color: #132437;

}

/* Style the accordion panel. Note: hidden by default */

div.panel {

    padding: 1px;    

  margin-bottom: 5px;

  background-color: #none;

    max-height: 0px;

    overflow: hidden;

    transition: max-height 0.2s ease-out;

}

Answer 1

我怀疑，当您单击其中一个日期链接时，它会抓取之前的哈希值已更改。

Answer 2

我认为如果您将 var hash = e.target.hash 更改为 var hash = window.location.hash 就会起作用。据我所知，点击事件对象不会返回 target.hash。&nbsp; &nbsp; // get list of links by class&nbsp; &nbsp; var links = document.getElementsByClassName("accordion-link");&nbsp; &nbsp; var linksLength = links.length;&nbsp; &nbsp; for(var i=0; i < linksLength; i++){&nbsp; &nbsp; &nbsp; links[i].onclick = function(e){&nbsp; &nbsp; &nbsp; &nbsp; // isolate the hash&nbsp; &nbsp; &nbsp; &nbsp; var hash = window.location.hash;&nbsp; &nbsp; &nbsp; &nbsp; // remove # from hash&nbsp; &nbsp; &nbsp; &nbsp; hash = hash.substring(1, hash.length);&nbsp; &nbsp; &nbsp; &nbsp; // select by id using hash&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(hash).click();&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }