WordPress中Javascript手风琴代码无法交互问题求助

Hey there! Let’s break down why your accordion isn’t responding to clicks in WordPress and get it working properly. I’ve looked at your code and test page, and here are the most common culprits and fixes:

1. The #1 Issue: DOM Load Timing #

Your JavaScript is running before the accordion buttons are rendered on the page. WordPress loads scripts in a specific order, and if your JS fires too early, it can’t find the .accordion elements to attach click listeners to.

Fix: Wrap Your JS in a DOM Ready Event #

Modify your JavaScript to wait until the entire page is loaded before running. Here’s the updated code:

// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
  var acc = document.getElementsByClassName("accordion");
  var i;

  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      }
    });
  }
});

2. Properly Load the Script in WordPress #

If you’re using a standalone .js file, make sure WordPress loads it correctly (and in the right place). Add this code to your theme’s functions.php file to enqueue the script in the footer (where DOM elements are already loaded):

function enqueue_custom_accordion_script() {
  // Replace '/js/accordion.js' with the actual path to your script file
  wp_enqueue_script( 
    'custom-accordion', 
    get_stylesheet_directory_uri() . '/js/accordion.js', 
    array(), // No dependencies needed for vanilla JS
    '1.0', 
    true // Load in the footer
  );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_accordion_script' );

3. Alternative: Use jQuery (If Your Theme Uses It) #

Many WordPress themes rely on jQuery, so switching to a jQuery-based version can avoid potential conflicts. Here’s the equivalent code:

jQuery(document).ready(function($) {
  $('.accordion').on('click', function() {
    $(this).toggleClass('active');
    var $panel = $(this).next('.panel');
    
    if ($panel.css('maxHeight') !== '0px') {
      $panel.css('maxHeight', '0');
    } else {
      $panel.css('maxHeight', $panel[0].scrollHeight + 'px');
    }
  });
});

If you use this, update your enqueue code to include jQuery as a dependency:

function enqueue_custom_accordion_script() {
  wp_enqueue_script( 
    'custom-accordion', 
    get_stylesheet_directory_uri() . '/js/accordion.js', 
    array('jquery'), // Depend on jQuery
    '1.0', 
    true 
  );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_accordion_script' );

4. Check for Console Errors #

Always open your browser’s developer tools (press F12, go to the Console tab) to see if there are any errors like:

• "Cannot read property 'addEventListener' of undefined" (means your JS can’t find the accordion elements)
• Syntax errors in your code

These messages will point you straight to the problem.

Your Original Code (For Reference) #

HTML

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</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>

CSS

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

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

内容的提问来源于stack exchange，提问作者tikka56