如何区分wordpress中的顶部导航菜单和正文导航菜单

Question

我目前正在使用wp_nav_menu 在顶部和正文中生成我的导航菜单。在header.php中，我用过

        <?php if(has_nav_menu('body-nav')) {
                wp_nav_menu(array('theme_location' => 'top-nav', 'items_wrap' => '<select class="mobile-menu">%3$s', 'container' => '', 'menu_class' => 'mobile-menu', 'sort_column' => 'menu_order', 'fallback_cb' => 'null'));
} else {
                wp_nav_menu(array('theme_location' => 'top-nav', 'items_wrap' => '<select class="mobile-menu">%3$s</select>', 'container' => '', 'menu_class' => 'mobile-menu', 'sort_column' => 'menu_order', 'fallback_cb' => 'null'));       
} ?>

<?php if(has_nav_menu('top-nav')) {
                wp_nav_menu(array('theme_location' => 'top-nav', 'items_wrap' => '%3$s</select>', 'container' => '', 'menu_class' => 'mobile-menu', 'sort_column' => 'menu_order', 'fallback_cb' => 'null'));
} else {
                wp_nav_menu(array('theme_location' => 'top-nav', 'items_wrap' => '<select class="mobile-menu">%3$s</select>', 'container' => '', 'menu_class' => 'mobile-menu', 'sort_column' => 'menu_order', 'fallback_cb' => 'null'));           
}?>

它可以正常工作并且显示良好，但是当浏览器 (Firefox) 处于还原状态或处于较小位置时，两个菜单会变成/组合在一个下拉框中。当浏览器处于恢复位置时，我需要区分顶部和正文导航菜单。即需要显示顶部菜单栏的顶部菜单以及全屏和浏览器恢复/小位置显示正文菜单栏的正文菜单。我已经尝试了很多。没有解决办法。当我尝试放置下拉框时，它还与顶部菜单和正文菜单相结合。如何区分此类问题。请参阅this site 恢复向下/小位置。有人知道这类问题吗？

Answer 1

这个“问题”是由你的主题引起的。 更具体地说，custom.js 位于http://letsassistblog.com/wp-content/themes/thegossip/lib/scripts/custom.js（和媒体查询）

第 16 行

/////////////////////////////////////// Mobile Navigation Menu ///////////////////////////////////////
jQuery("<option />", {"selected": "selected", "value": "", "text": navigationText}).prependTo(".nav select");
jQuery(".nav .menu a").each(function() {
var el = jQuery(this);
var padding = "";
for (var i = 0; i < el.parentsUntil('div > ul').length - 1; i++)
padding += "-";
jQuery("<option />", {
"value" : el.attr("href"),
"text" : padding + el.text()
}).appendTo(".nav select");
});
jQuery(".nav select").change(function() {
window.location = jQuery(this).find("option:selected").val();
}); 

现在，我用引号写了“问题”，因为这实际上是一个（非常）理想的功能，称为“Responsive Design”或RWD。它会调整您的菜单，以便在移动设备上轻松查看..

现在 - 关于您网站上的一些实际问题 - 我很惊讶它有效。 你是 jQuery 3 次......和它的 2 个不同版本。

我会查看代码并对脚本加载进行一些更正...

编辑我 - 从你的评论中不清楚你想做什么 - 但我已经在生成菜单的代码上方向你展示了。这一行：

jQuery(".nav .menu a").each(function()

正在使用.nav 中的所有.menu 类a 元素并转向选项选择。

由于您的 body-nav 和 top-nav id 都共享相同的 .nav 类 - 该脚本适用于两者。

如果您只希望 ONE 受到影响 - 更改该行中的选择器。 例如

 jQuery("#top-nav .menu a").each(function() // or body-nav

或

 jQuery("#top-nav .nav .menu a").each(function()// or body-nav

如果您想完全禁用两者 - 只需将其删除或注释掉即可。

关于你对jQuery的评论- 您的站点从 3 个不同的来源和 2 个版本加载 3 个不同的库。 jQuery 应该只加载一次以避免冲突并且没有理由加载 3 次（除了极端的兼容性问题）。

它不是多次使用的同一个库 - 在 jQuery 中没有意义（或任何库 - 这是库的全部意义..）。