尝试在 Wordpress 中使用 javascript 创建手风琴

Question

您好，我是 Javascript 的新手，但我正在尝试使用它在 Wordpress 中创建手风琴。我正在使用 W3 中的这个确切代码：

http://www.w3schools.com/howto/howto_js_accordion.asp

CSS 有效，因为我有一个覆盖文件插件，我可以在 wordpress 页面的文本选项卡中执行 HTML。但是 js 不工作。目前它的设置方式是这样的：

更新：这是wordpress页面框中的代码：

<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

这是我的 CSS 文件中的代码：

button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

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

div.panel {
padding: 0 18px;
background-color: white;
display: none;
}

div.panel.show {
    display: block;
}

这是我的外部文件中的 JS：

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

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
}

我通过在 header.php 中添加它来调用它：

<script type="text/javascript" src="/js/bigjava.js"></script>

然后我将JS添加到wordpress页面：

<script type="text/javascript">
js_in_faq();
</script>

Answer 1

不久前，我在尝试合并 Google 地图时收到了一个 JavaScript 错误，请参考 Q&A Why am I getting a Google Map JavaScript error in my WordPress theme? 这可能会对您有所帮助，因为您可以通过多种方式来执行此操作。无论是否在文件中，您都没有提及如何调用 JS。如果你想在页面底部调用它，你可以使用条件并调用钩子wp_footer：

function js_in_footer() {
    <script type='text/javascript'>
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
    </script>
}
add_action( 'wp_footer', 'js_in_footer' );

但这将依赖于知道你的 JS 被调用的位置。如果您希望 JS 在文件中，则需要使用以下内容将文件排入队列：

function call_the_js_files() {  
        wp_enqueue_script( 'accordion_js', get_template_directory() . '/js/accordion.js', array( 'jquery' ), '', true );
    endif;
add_action( 'wp_enqueue_scripts', 'call_the_js_files' );

上面的代码示例，但如前所述，您并没有真正说明您是如何调用 JS 的。看看Using Javascript