【发布时间】:2018-03-20 03:35:07
【问题描述】:
我正在尝试向我的 wordpress wp_nav_menu 中的 li 元素添加一个类。我在这里遵循了几个答案,但只能使其部分工作。所以对于我的导航菜单,我有 >
functions.php >
//REGISTER NAVIGATION MENU
function smtg_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
'footer-menu' => __( 'Footer Menu' )
)
);
}
add_action( 'init', 'smtg_menus' );
此代码将 nav-links-dropdown 类添加到类别的下拉菜单中。
function my_nav_menu_submenu_css_class( $classes ) {
$classes[] = 'nav-links-dropdown';
return $classes;
}
add_filter( 'nav_menu_submenu_css_class', 'my_nav_menu_submenu_css_class' );
Header.php >
$args = array(
'theme_location' => 'header-menu',
'container' => 'nav',
'container_class' => '',
'container_id' => '',
'menu_class' => '',
'menu_id' => '',
'fallback_cb' => false );
wp_nav_menu( $args );
我的主导航中总共有 4 个 li 元素,其中只有一个 li 元素有一个子菜单,也就是下拉菜单。
我不知道如何向具有下拉菜单的 li 添加一个类以触发下拉菜单。
看页面源码,我明白了>
<!-- START NAV INSIDE NAV BAR -->
<nav class="menu-header-menu-container">
<ul id="menu-header-menu" class="">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a>
<ul class="sub-menu nav-links-dropdown">
<li><a href="#">Cat1</a></li>
<li><a href="#">cat2</a></li>
<li><a href="#">cat3</a></li>
<li><a href="#">cat4</a></li>
<li><a href="#">cat5</a></li>
<li><a href="#">cat6</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</nav>
在第二个 LI 元素上 - 我需要向它添加类 cat-li-dropdown 以显示下拉菜单。我似乎无法弄清楚如何在任何地方的 php 中做到这一点。
现在我正在使用 jquery 将类 cat-li-dropdown 添加到第二个元素中。
$('nav li:nth-child(2)').addClass('cats-li-dropdown');
如何避免使用 jquery 向第二个 li 元素添加类?
我已经尝试在菜单选项中的 wordpress 中添加类,但是当我查看页面源时它仍然是空白的。
这并没有给 li 元素添加任何内容,尽管它看起来应该如此。还有其他想法吗?
【问题讨论】:
-
您是否有您正在处理的带有 wordpress 菜单的页面? CSS 类对您不起作用似乎很奇怪。您是否还在您的 wordpress 模板中包含了 wp_head() 和 wp_footer() ?
-
现在我有 4 页。家。类别。信息。接触。在我的 header.php 中有 wp_head,在我的 footer.php 中有 wp_footer。我的入队脚本和样式在我的 functions.php 文件中 100% 工作。我很困惑为什么即使在图片中为页面添加 css 类时,它实际上也不会在生成的代码中添加它。嗯。
-
这可能是您的 wordpress 版本的另一个令人讨厌的故障,无论如何我找到了一种将自定义 css 添加到子菜单的方法stackoverflow.com/questions/5034826/…
-
感谢您的链接,看来这只是在下拉菜单本身中添加了一个类,我已经把它记下来了。只是无法将类添加到导航中的第二个 LI 元素以实际触发下拉菜单。现在我正在使用 nav li:nth-child(2):hover .nav-links-dropdown { display: block; } ,显示下拉菜单,很惊讶这个简单的东西在 wordpress 中不起作用
标签: wordpress wp-nav-menu-item