是否将类(箭头)添加到具有子项的主菜单链接？

时间：2011-10-03 作者：Wordpressor

我想知道是否可以将不同的类添加到在外观>菜单树中具有子级的二级/三级/四级/等级项目中？

我就是这样叫菜单的：

 <?php $menu_args = array(
    \'container\'       => \'\', 
    \'menu_class\'      => \'\', 
    \'menu_id\'         => \'my-menu\',
    \'walker\'          => new Description_Walker);

    wp_nav_menu($menu_args );   
 ?>
我知道每个链接都有不同的ID<li id="menu-item-3230">, 但我希望解决方案是动态的，这样我就不必每次修改代码。我想最简单的方法是为这些项目附加额外的类，但是如何附加？

enter image description here

4 个回复
最合适的回答,由SO网友:Jamie 整理而成

有两种方法可以做到这一点：

Javascript。您可以使用JQuery选择<li> 已经<ul> “子菜单”类的子类，插入内容或附加CSS类，然后设置样式。例如：$(\'.sub-menu\').parent().addClass(\'myclass\')

PHP，一个新的walker函数。从wp INCLUDE/nav菜单模板复制代码。php（直到大约第109行）进入主题函数。php创建一个新的walker。将此walker作为参数传递给菜单调用。在修改后的Walker中插入<span> 用于子菜单级项目上的箭头。

function start_lvl(&$output, $depth) {
    $indent = str_repeat("\\t", $depth);
    $output .= "\\n$indent<span class=\\"right-arrow\\">&rarr;</span><ul class=\\"sub-menu\\">\\n";
}
这将在子菜单列表项之前添加一个小箭头，然后您可以设置其样式。

SO网友:onetrickpony

您可以扩展菜单漫游器，并在具有子菜单的项目上添加“has\\u children”类：

class My_Walker_Nav_Menu extends Walker_Nav_Menu{
  public function display_element($el, &$children, $max_depth, $depth = 0, $args, &$output){
    $id = $this->db_fields[\'id\'];    

    if(isset($children[$el->$id]))
      $el->classes[] = \'has_children\';    

    parent::display_element($el, $children, $max_depth, $depth, $args, $output);
  }
}
并将类的实例作为参数传入wp_nav_menu():

wp_nav_menu(array(
  \'theme_location\'  => \'whatever\',
  \'walker\'          => new My_Walker_Nav_Menu(),
));
然后用CSS添加箭头，如Philip发布的：

li.has_children > a:after { content: " →"; }

SO网友:SarahA

一种解决方案是在管理员中创建/编辑菜单时添加自定义CSS类。如果您还没有看到CSS选项框，请转到菜单管理页面上的屏幕选项并勾选它。

SO网友:Philip

使用css，您还可以使用content property, 像这样的东西一定能起作用，

#div-id ul li a:after { content: " →"; }

结束
标签： menus   javascript   walker   小码农  

相关推荐

Javascript to open new window

我想在新的弹出浏览器窗口中打开一个链接。在使用JavaScript的非WordPress中，我会这样做（但我会添加一些下划线/颜色，使其看起来像一个链接）。<span onClick=\"myRef = window.open(\'/Paid_Videos/AudioGenerator01.html\',\'mywin\', \'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); myRef.focus