【问题标题】:WordPress menu how to add a class to only the parent a element?WordPress菜单如何将一个类添加到仅父元素?
【发布时间】:2020-02-06 18:19:56
【问题描述】:

我只想将类下拉列表添加到父元素。我试图向functions.php添加一些代码,但这并没有解决我的问题。用 jquery/js 可以做到这一点吗?

<nav class="container_menu">
    <ul class="reset">
        <li class="active "><a title="Home" href="/" class="class here">Home</a></li>

        <li class="menu "><a title="parent" href="/parent" class="class here">parent</a>
            <ul class="reset">
                <li class=""><a title="child1" href="/child/child1">child 1</a></li>
                <li class=""><a title=child2" href="/child/child2">Child 2</a></li>
            </ul>
        </li>

    </ul>
</nav>

【问题讨论】:

  • 如果您从 WP 后端添加菜单,您可以设置父子分层菜单。当您在 header.php 中获得菜单时,您还将获得带有下拉类的所需结构。

标签: jquery wordpress menu parent nav


【解决方案1】:

您可以使用nav_menu_link_attributes 过滤器来修改&lt;a&gt; 属性。

对于您的情况,您可以使用以下代码:

function add_classname_to_parent_nav_link($atts, $item) {

    // add class only on parent
    if($item->menu_item_parent == 0) {
        $atts['class'] = 'your-class-name';
    }   
    return $atts;   
}
add_filter('nav_menu_link_attributes', 'add_classname_to_parent_nav_link', 10, 2);

【讨论】:

    【解决方案2】:

    不使用 jquery 或 javascript 或其他框架客户端。

    您可以创建一个函数并将过滤器添加到 wp_nav_menu_objects,如下所示:

    /**
    * Add a parent CSS class for nav menu items.
    *
    * @param array  $items The menu items, sorted by each menu item's menu order.
    * @return array (maybe) modified parent CSS class.
    */
    function wpdocs_add_menu_parent_class( $items ) {
        $parents = array();
    
        // Collect menu items with parents.
        foreach ( $items as $item ) {
            if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
                $parents[] = $item->menu_item_parent;
            }
        }
    
        // Add class.
        foreach ( $items as $item ) {
            if ( in_array( $item->ID, $parents ) ) {
                $item->classes[] = 'dropdown'; //here attach the class
            }
        }
        return $items;
    }
    add_filter( 'wp_nav_menu_objects', 'wpdocs_add_menu_parent_class' );
    

    【讨论】:

    • 您好,谢谢您的回复!可悲的是,这仅向 li 元素而不是 a 添加了一个类。你知道改变这种情况的方法吗?
    【解决方案3】:

    你可以做这样的事情来实现你想要的。这会将类“someclass”添加到给定结构中包含“ul”元素的任何“li”元素。

    var menu = document.querySelector('nav.container_menu > ul');
      menu.childNodes.forEach((node,idx)=>{
        // find child-nodes of the ul 
        if(node.tagName == 'LI'){
          var hasSubMenu = false;
          node.childNodes.forEach( (subnode,idx)=>{
            if(subnode.tagName == 'UL'){
              hasSubMenu = true;
            }
          });
          if(hasSubMenu){
            node.classList+=" someclass";
          }
        }
      });
    

    但是,当您使用 wordpress 时,我建议您按照应该创建菜单的方式进行操作,即使用 Walker_Nav_Menu / Walker_Page(参见 https://codex.wordpress.org/Class_Reference/Walker_Page)和 wp_nav_menu()(参见 https://developer.wordpress.org/reference/functions/wp_nav_menu/)。

    经过快速搜索,我认为这已经足够详细地解释它了:

    https://www.ibenic.com/how-to-create-wordpress-custom-menu-walker-nav-menu-class/

    【讨论】:

      猜你喜欢
      • 2018-08-18
      • 2018-11-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-03-29
      • 1970-01-01
      • 2014-01-12
      相关资源
      最近更新 更多