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()

将所有.menu类a元素放在.nav中并转到选项选择。

由于您的body-nav和top-nav个ID都共享同一个.nav类，因此该脚本适用于两者。

如果您只想让ONE受影响 - 请更改该行中的选择器。 e.g。

 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只应加载ONCE以避免冲突，并且没有理由加载3次（极端兼容性问题除外）。

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

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

1 个答案: