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＆amp; 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

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

1 个答案: