html - 仅将 navbar-dropdown 类应用于菜单的第一级
问题描述
所以我正在为 WordPress 构建一个 Navwalker 并且我被困在一个步骤上,我似乎无法弄清楚如何完成这项工作。
所以我有一个带有下拉菜单的菜单,它使用navbar-dropdown
.
所以我希望start_lvl
只应用于第一个下拉菜单而不是第二或第三级..我如何能够将导航栏下拉菜单应用于菜单下拉菜单的第一级?
所以如图所示,我希望第一个级别有navbar-dropdown
类(以绿色突出显示),但所有其他 ul 级别都没有navbar-dropdown
.
class Navwalker extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul role=\"menu\" class=\"navbar-dropdown\">\n";
}
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$custom_classes_from_menu = implode(' ', $item->classes); // turn the WP classes object array to string values
$liClasses = 'navbar-item ' . $custom_classes_from_menu; // add the values to your classes list
// If menu it has children
$hasChildren = $args->walker->has_children;
$liClasses .= $hasChildren ? " has-dropdown is-hoverable": "";
if ($hasChildren) {
$output .= "<li class='" . $liClasses . "'>";
$output .= "\n<a class='navbar-link' href='" . $item->url . "'>" . $item->title . "</a>";
}
else {
$output .= "<a class='" . $liClasses . "' href='" . $item->url . "'>" . $item->title;
}
// Adds has_children class to the item so end_el can determine if the current element has children
if ($hasChildren) {
$item->classes[] = 'has_children';
}
}
public function end_el(&$output, $item, $depth = 0, $args = array(), $id = 0 ){
if(in_array("has_children", $item->classes)) {
$output .= "</li>";
}
$output .= "</a>";
}
public function end_lvl (&$output, $depth = 0, $args = array()) {
$output .= "</ul>";
}
}
解决方案
请将您的 start_lvl 函数更改为:
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
if($depth == 0)
$output .= "\n$indent<ul role=\"menu\" class=\"navbar-dropdown\">\n";
else
$output .= "\n$indent<ul role=\"menu\">\n";
}
我希望这会有所帮助。
推荐阅读
- javascript - 如何从 .getElementsByTagNAme() html 元素中进行 .querySelectAll()?
- javascript - ubuntu 上 Google Chrome 75.0.3770.80 上的 Selenium Actions moveToElement 不起作用
- c# - 使用 Microsoft 自定义视觉 API 认知服务的 rest Sharp 调用预测端点上传图像时出现问题
- javascript - 旨在返回数组的函数返回未定义。函数内的 Console.log(array) 返回数组
- .net - 解决 .net 命名空间冲突
- html - rem font-size 在 css 动画中无法正确渲染
- moto - 如何检索保存在 Google play 游戏中但不会返回的数据?
- android - 向上导航箭头未显示在应用栏中
- vulkan - 被描述符集错误弄糊涂了
- list - Dart 中两种 List 初始化的区别