slideToggle 和 onClick 在放入 wordpress 网站时不起作用

Question

$('#comment-button').click(function () {
    $('#comment-panel').slideToggle();
});

#comment-button {
    padding: 3px 5px;
    background: #dddeee;
    border: 1px solid #cccddd;
}
#comment-panel {
    display: none;
    background: #dddeee;
    width: 300px;
    height: 120px;
}

<div id="comment-button">Button</div>
<div id="comment-panel">Comments</div>

我试着做一个 slideToggle，它似乎在 jsfiddle 上运行良好。但是当我尝试在我的 wordpress 网站上使用相同的代码时，它不起作用。我确实将脚本放在 js 文件中，并在主题函数上也将其正确地排入队列。我想知道这可能是什么问题。

编辑：似乎它在片段中也不起作用。不过在 jsfiddle 页面上没问题：jsfiddle(dot)net/3c1gjzg0/

Answer 1

将您的代码包装在函数中并将 $ 作为变量传递，如下所示：

(function($) {

//Put all your code in this fuction
$('#comment-button').click(function () {
    $('#comment-panel').slideToggle();
});

})( jQuery );

Answer 2

将 javascript 代码放入 jQuery( document ).ready() 并将 $ 替换为 jQuery。请尝试以下代码：

jQuery(document).ready(function(){
   jQuery('#comment-button').click(function () {
       jQuery('#comment-panel').slideToggle();
   });
});

slideToggle 和 onClick 在放入 wordpress 网站时不起作用

slideToggle and onClick not working when put in wordpress site

wordpress

jquery

onclick

slidetoggle