jQuery 显示/隐藏在 WordPress 中不起作用。不过在普通网站上工作正常

Question

我对这个完全不知所措。我已将 $ 更改为 jQuery，我尝试使用 noConflict，我尝试使用切换命令、href onClick，现在只是尝试了显示/隐藏方法，但在该主题中似乎没有任何效果。我禁用了所有插件，这也没有帮助。该站点已经加载了 jquery 库，并且许多其他元素正在使用 jQuery。

任何遇到类似问题并设法克服的人在解决此问题时提供的任何帮助都将是令人惊奇的!谢谢!

JavaScript 是

$.noConflict();
jQuery(document).ready(function(){

    jQuery("#slidingTopBar").hide();
    jQuery(".show_hide").show();

jQuery('.show_hide').click(function(){
jQuery("#slidingTopBar").slideToggle();
});

});

用于触发div的html是

<div id="TopBar"><a href="#" class="show_hide">SHOW</a></div>

然后，一旦该 div 被显示，该 div 内就会有一个关闭的 div，如下所示:

<div id="slidingTopBar"><div id="closebar"><a href="#" class="show_hide">CLOSE</a></div></div>

CSS(所有这些都是为了以防万一这里有东西)是

#slidingTopBar
{ 
background:#199651;
display:none;
position: absolute;
height:250px;
width:100%;
left:0px;
top:0px; 
z-index:9999;
}
#TopBar{
position: absolute;
z-index: 9999;
height: 40px;
width: 40px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#closebar{
position: absolute;
right:10px;
bottom: 10px;
width:35px;
height:35px;
z-index:9999;
background-repeat: no-repeat;
cursor: pointer;
}

实际的 WordPress 站点(不工作)是 here (右上角按钮被触发)

Here it is working as html file

Answer 1

我尝试了您输入的代码。我将尝试用适当的缩进为您可视化它:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("#slidingTopBar").hide();
    jQuery(".show_hide").show();
    jQuery('.show_hide').click(function(){
        jQuery("#slidingTopBar").slideToggle();
    });

您缺少就绪函数的结束符“)”。这有效:

$.noConflict();
jQuery(document).ready(function(){
    jQuery("#slidingTopBar").hide();
    jQuery(".show_hide").show();
    jQuery('.show_hide').click(function(){
        jQuery("#slidingTopBar").slideToggle();
    });
});

我认为模板仍然允许使用“$”符号，所以我会这样做。为了进行测试，您应该使用可用的开发人员工具。 Google Chrome 具有非常好的调试 javascript 和 jquery 的功能。一个非常好用的函数是console.log(whateveryouneedlogged)。该函数输出到开发者工具的控制台，这意味着您可以获得传递给它的任何值。

正如@scraaappy所说，那么在运行代码之前你还没有真正加载jquery。这会对你有很大帮助。这再次显示在 Google Chrome 的开发者工具中。