我是网站开发的新手，所以我正在测试一些响应菜单，看看它在WordPress中是如何工作的。我已经选择了这个菜单，它在演示中工作得很好。但是，当我将代码应用到我的网站时，菜单栏无法折叠。class=“navbar-collapse collapse show”这个类中的show无法正确删除。[您可以在检查页面时看到它：https://gttutor.com/test/我可以知道我应该如何修复它吗？谢谢！
第一个
排名方法：
( function test( $ ){
var tabsNewAnim = $('#navbarSupportedContent');
var selectorNewAnim = $('#navbarSupportedContent').find('li').length;
var activeItemNewAnim = tabsNewAnim.find('.active');
var activeWidthNewAnimHeight = activeItemNewAnim.innerHeight();
var activeWidthNewAnimWidth = activeItemNewAnim.innerWidth();
var itemPosNewAnimTop = activeItemNewAnim.position();
var itemPosNewAnimLeft = activeItemNewAnim.position();
$(".hori-selector").css({
"top":itemPosNewAnimTop.top + "px",
"left":itemPosNewAnimLeft.left + "px",
"height": activeWidthNewAnimHeight + "px",
"width": activeWidthNewAnimWidth + "px"
});
$("#navbarSupportedContent").on("click","li",function(e){
$('#navbarSupportedContent ul li').removeClass("active");
$(this).addClass('active');
var activeWidthNewAnimHeight = $(this).innerHeight();
var activeWidthNewAnimWidth = $(this).innerWidth();
var itemPosNewAnimTop = $(this).position();
var itemPosNewAnimLeft = $(this).position();
$(".hori-selector").css({
"top":itemPosNewAnimTop.top + "px",
"left":itemPosNewAnimLeft.left + "px",
"height": activeWidthNewAnimHeight + "px",
"width": activeWidthNewAnimWidth + "px"
});
});
}
$(document).ready(function(){
setTimeout(function(){ test(); });
});
$(window).on('resize', function(){
setTimeout(function(){ test(); }, 500);
});
$(".navbar-toggler").click(function(){
setTimeout(function(){ test(); });
}(jQuery));
2条答案
按热度按时间rjee0c151#
您的
navbar-toggler按钮没有任何切换类代码。相反，定义了一个空的setTimeout（）。尝试如下更改。sqxo8psd2#
@Ozgur Sar已经给出了正确的答案，但可能有一些原因导致它不起作用：
很有可能在控制台中出现“$ is not a function”的错误，虽然WordPress自带jQuery，但有时必须按如下方式 Package 该函数才能正常工作：
因此，您的代码可以看起来像：
这应该可以
我没有使用超时功能。如果你想做一个平滑的过渡，尝试使用CSS过渡属性，使它看起来不错。
关于将javascript添加到wordpress
一个更可靠的方法是把它放在一个单独的文件中（可能是你的主题文件夹中的
js文件夹），然后把它和jQuery的依赖关系放在一起（因为如果jquery没有正确加载，代码将无法工作）。