问题描述
我是网站开发的新手，所以我正在使用一些响应式菜单进行测试，以了解它在 wordpress 中的工作原理。我选择了这个菜单，它在演示中完美运行。然而，当我将代码应用到我的网站时，菜单栏无法折叠。 class="navbar-collapse collapse show" 该类中的show无法正常删除。 [您可以在检查页面时看到它：https://gttutor.com/test/ 我可以知道我应该如何修复它吗？谢谢！
<div class="navbar-collapse collapse show" id="navbarSupportedContent" style="padding-right: 0px;">
<ul class="navbar-nav ml-auto">
</div>
<nav class="navbar navbar-expand-lg navbar-mainbg" style="
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;">
<a class="navbar-brand navbar-logo" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars text-white"></i>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent" style="padding-right: 0px;">
<ul class="navbar-nav ml-auto">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="fas fa-tachometer-alt"></i>Dashboard</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-address-book"></i>Address Book</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-clone"></i>Components</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-calendar-alt"></i>Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-chart-bar"></i>Charts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="far fa-copy"></i>Documents</a>
</li>
</ul>
</div>
</nav>
<script>
// ---------Responsive-navbar-active-animation-----------
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","width": activeWidthNewAnimWidth + "px"
});
});
}
$(document).ready(function(){
setTimeout(function(){ test(); });
});
$(window).on('resize',function(){
setTimeout(function(){ test(); },500);
});
$(".navbar-toggler").click(function(){
setTimeout(function(){ test(); });
});
</script>
来自等级的方法：
( 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",500);
});
$(".navbar-toggler").click(function(){
setTimeout(function(){ test(); });
}(jQuery));
解决方法
您的 navbar-toggler 按钮没有任何切换类代码。相反，定义了一个空的 setTimeout()。试着像这样改变它。
$('.navbar-toggler').on('click',function(e) {
$('#navbarSupportedContent').toggleClass("show");
e.preventDefault();
});
@Ozgur Sar 已经给出了正确答案，但可能有其不工作的原因：
控制台中出现错误“$ is not a function”的可能性很大。虽然 Wordpress 本身就有 jQuery，但该函数有时必须按如下方式包装才能工作：
( function( $ ) {
/* your code ... */
}( jQuery ) );
所以你的代码看起来像：
( function( $ ) {
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","width": activeWidthNewAnimWidth + "px"
});
});
$('.navbar-toggler').on('click',function(e) {
$('#navbarSupportedContent').toggleClass("show");
e.preventDefault();
});
}( jQuery ) );
这应该有效。
我没有使用超时函数。如果您想要平滑过渡，请尝试使用 CSS 过渡属性使其看起来更漂亮。
关于将 javascript 添加到 wordpress
一种更可靠的方法是将它放在一个单独的文件中（可能是您的主题文件夹内的 js 文件夹）并使用 jQuery 的依赖项将其排入队列（因为代码将不起作用，如果jquery 未正确加载）。这可以在您的主题的 functions.php 中：
function gttutor_scripts() {
wp_enqueue_script( 'script',get_template_directory_uri() . '/js/gt-tutor.js',array ( 'jquery' ),1.1,true);
}
add_action( 'wp_enqueue_scripts','gttutor_scripts' );