Question

我在使用简单的JavaScript来使手风琴样式按钮起作用时遇到问题。我直接从此example复制了代码。我已经按照视频教程的部分1和2，以及WordPress Codex的Using JavaScript进行了培训。

这是手风琴.js

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        /* Toggle between adding and removing the "active" class,
        to highlight the button that controls the panel */
        this.classList.toggle("active");

        /* Toggle between hiding and showing the active panel */
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}

这是functions.php

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'hestia-style'; // This is 'hestia-style' for the Hestia theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

<?php
function hestia_child_scripts() {
    wp_enqueue_script( 'accordion js', get_stylesheet_directory_uri() . '/js/accordion.js');
}
add_action( 'wp_enqueue_scripts', 'hestia_child_scripts' );
?>

这是我的HTML

<button class="accordion">Are there minimums?</button>
<div class="panel">
   <p>We accept orders of any size.</p>
</div>

正在生成指向Accordion.js的链接，因为我可以在源代码中看到它。

Answer 1

我已经在本地服务器上尝试过您的代码，并且工作正常。因此，在某些情况下为什么您的代码无法正常工作

您的JS不包含它，或者它抛出了错误，您可以在控制台中^{[1] [2]}
或者您的某些div覆盖了手风琴，因此您无法单击它并且它不起作用。因此可能是HTML，CSS问题

因此，请务必检查这些要点。

Answer 2

尝试像这样使脚本入队：

wp_enqueue_script( 'accordion js', get_stylesheet_directory_uri() . '/js/accordion.js', array(), null, true);

它确保脚本在页面加载后加载，并且可以在页面上找到您要定位的元素，即.accordion

手风琴按钮不会在WordPress中切换

2 个答案: