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文件中，并且在主题函数上也将它排列在prorerly上。我想知道它可能是什么问题。

编辑：似乎它也没有在片段中工作。这在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();
   });
});

放入wordpress网站时，slideToggle和onClick无法正常工作

2 个答案: