Question

我在Wordpress安装上有一个AJAX实现，我正在使用'CSS和Javascript工具箱'插件来应用其他Javascript代码。我还在section和。

中的header.php文件中尝试了以下代码

我正在使用标准的“Twenty Fourteen”主题，而我正在引用顶部的主导航栏。没有子页面，只有普通链接。

http://twentyfourteendemo.wordpress.com/

我正在使用的代码，我确定是问题，就是这个

<script>
jQuery('ul.menu li').click(function(){   
// Remove class on each item  
jQuery('ul.menu li').removeClass('current-menu-item current_page_item');

// Add class for this one    
jQuery(this).addClass('current_page_item current-menu-item'); 
})
</script>

我也试过这个

<script>
jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');
</script>

我不太了解Javascript，但这没有做任何事情。单击链接后，导航栏上的“突出显示”页面将保留在原始页面上。

我还有其他代码，可以在点击链接（在移动设备上）时打开和关闭导航栏，并且工作正常，因此代码正在注册，只是无法正常工作。

有谁知道为什么这段代码不起作用？我已经坚持这个问题好几天了，如果不修复我就无法启动，我甚至会向任何有解决方案的人投入一些啤酒钱

Answer 1

我无法在该网站上看到您的示例代码，看看您的代码是在身体还是头部等，但您可以尝试以下几种方法：

1 - 您尚未将代码包装在文档就绪事件中。

这意味着您可能会在DOM元素存在之前运行代码，因此代码不执行任何操作。

此jQuery(document).ready()的快捷方式版本还提供了一个本地范围的$变量，因此您可以缩短jQuery代码：

<script>
jQuery(function($){
    $('ul.menu li').click(function(){   
        // Remove class on each item  
        $('ul.menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

2 - 如果在加载后添加/分类菜单项（例如通过插件），则需要使用委派的事件处理程序：

e.g。

<script>
jQuery(function($){
    $(document).on('click', 'ul.menu li', function(){   
        // Remove class on each item  
        $('ul.menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

这可以通过监听事件冒泡到不变的祖先元素，然后应用jQuery元素选择器，然后应用您对导致事件的任何选定元素的功能。

注意：委派事件的后备元素应始终为document而不是'body'，因为'body'存在一些可能导致的错误（与样式相关）事件不要触发。但是，您应该将最近的不变祖先定位为最有效的。

注意：第二个选项通常是为e组控件编写事件处理程序的最佳方法，因为它只向DOM添加一个处理程序。

更新

正如预测的那样，JS代码位于标题中，因此需要包装在文档就绪事件处理程序中。

此外，实际网站使用如下菜单：<ul id="menu-pages" class="nav-menu">，因此菜单项的选择器应为ul.nav-menu li或#menu-pages li而不是ul.menu li。

e.g

<script>
jQuery(function($){
    $(document).on('click', 'ul.nav-menu li', function(){   
        // Remove class on each item  
        $('ul.nav-menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

如何在使用ajax时处理更新导航栏

1 个答案:

更新