WP实现一个层级折叠菜单功能扩展支持无线层级嵌套解决方案实操

<!-- 一级菜单 -->
<div class="nav-box-cont">
  <div class="dropdown-left-nav-box">
    <div class="dropdown-left has-children">
      <a href="#">
        <div class="dropdown-left-nav-cont"> <!-- 影响区 -->
          <img class="menu-icon" src="...">
          <span class="menu-title">主菜单</span>
        </div>
      </a>
      
      <!-- 二级菜单容器 -->
      <div class="dropdown-left-content">
        <div class="submenu">
          <!-- 二级菜单项 -->
          <div class="dropdown-left-nav-cont"> <!-- 独立区 -->
            <!-- 可继续嵌套三级 -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

/**
 * 自定义下拉菜单Walker类
 */
class Custom_Dropdown_Walker extends Walker_Nav_Menu {
    public function start_lvl(&$output, $depth = 0, $args = null) {
        $output .= '<div class="dropdown-left-content"><div class="submenu">';
    }
    
    public function end_lvl(&$output, $depth = 0, $args = null) {
        $output .= '</div></div>';
    }
    
    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args, $depth));
        
        $class_names .= ' dropdown-left';
        if (in_array('menu-item-has-children', $classes)) {
            $class_names .= ' has-children';
        }
        
        $output .= "<div class='dropdown-left-nav-box'>";
        $output .= "<div class='" . esc_attr($class_names) . "'>";
        
        // 菜单项图片逻辑重构
        $image_url = get_post_meta($item->ID, '_menu_item_image_url', true);
        
        // 父级菜单结构（depth=0）
        if ($depth === 0) {
            // 显示可点击的父级菜单图片
            $output .= "<a href='" . esc_url($item->url) . "' class='dropdown-left-nav-link'>";
            if ($image_url) {
                $output .= "<div class='dropdown-left-nav-img'>";
                $output .= "<img src='" . esc_url($image_url) . "' alt='" . esc_attr($item->title) . "'>";
                $output .= "</div>";
            }
            $output .= "<div class='dropdown-left-nav-cont'>";
            $output .= "<div class='dropdown-left-nav-tit'>" . esc_html($item->title) . "</div>";
            if (!empty($item->description)) {
                $output .= "<span class='dropdown-left-text-des'>" . esc_html($item->description) . "</span>";
            }
            $output .= "</div>";
            $output .= "</a>";
        } 
        // 子菜单结构（depth>0）
        else {
            $output .= "<div class='dropdown-left-nav-cont'>";
            $output .= "<a href='" . esc_url($item->url) . "' class='submenu-item'>";
            
            // 保留子菜单左侧图片
            if ($image_url) {
                $output .= "<div class='submenu-item-left'>";
                $output .= "<img src='" . esc_url($image_url) . "' alt='" . esc_attr($item->title) . "'>";
                $output .= "</div>";
            } else {
                $output .= "<div class='submenu-item-left'>";
                $output .= "<img src='" . esc_url(get_template_directory_uri() . '/images/default-menu-icon.png') . "' alt='默认图标'>";
                $output .= "</div>";
            }
            
            $output .= "<div class='submenu-item-right'>";
            $output .= "<span class='submenu-item-title'>" . esc_html($item->title) . "</span>";
            if (!empty($item->description)) {
                $output .= "<span class='submenu-item-desc'>" . esc_html($item->description) . "</span>";
            }
            $output .= "</div>";
            $output .= "</a>";
            $output .= "</div>";
        }
    }
    
    public function end_el(&$output, $item, $depth = 0, $args = null) {
        $output .= "</div></div>";
    }
}