有很多解释的简单问题。

我试图在我的Wordpress主题中实现一个手风琴脚本。我正在使用w3schools example 作为一个起点，但我在让它发挥作用方面有一些问题。

这就是我目前所做的：

This is how I load my scripts in functions.php:

function alepscript() {
    wp_enqueue_script( \'alepscript\', get_template_directory_uri() . \'/js/alep.min.js\', array( \'jquery\' ), \'1.0.0\', true );

    wp_enqueue_script( \'dotdotdot\', get_template_directory_uri() . \'/js/dotdotdot.min.js\', array( \'jquery\' ), \'1.8.3\', true );
}
add_action( \'wp_enqueue_scripts\', \'alepscript\', \'dotdotdot\' );

（alep.min.js是我包含脚本的地方）

This is how I have added the script:

(function($) {
  alert("Accordion script loaded");
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";
    } 
  }
}
})(jQuery);

我已添加(function($) {} 因为我之前读到WordPress中的jQuery脚本需要这样做。我还补充了alert("Accordion script loaded"); 只是为了确保脚本正在加载。

CSS:

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

Markup:

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

这就是我得到的：

如果我尝试单击其中一个部分，除了控制台中的错误外，什么也不会发生。我不知道这意味着什么，也不知道如何解决它，甚至不知道这是否是问题所在。

(function($) {

$(window).load(function() { //lets wait for all to be loaded

  alert("Accordion script loaded");
  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";
      } 
    }
  }

});

})(jQuery);