如何为含子元素的li元素添加自定义类及输出特定属性（自定义walker场景）

嘿，这个问题我太熟悉了！不管是普通前端场景还是自定义Walker的后端生成场景，都有明确的解决办法，我给你分场景拆解：

如果只是前端层面的需求，有两种实用方案：

• CSS 快捷方案（现代浏览器支持）：
  如果你只是需要给这类li加样式，甚至不用手动加类，直接用:has()伪类就能精准选中包含直接子列表的li：

  /* 选中所有直接包含ul/ol的li元素 */
  li:has(> ul, > ol) {
    background-color: #f0f0f0;
    font-weight: bold;
  }
  

  不过要注意，:has()目前在IE和部分旧版浏览器不支持，如果需要兼容老浏览器，优先用JS方案。

• JavaScript 兼容方案：
  遍历页面上的所有li元素，检查每个li是否有直接子元素是ul或ol，有的话就给它加上自定义类：

  document.querySelectorAll('li').forEach(li => {
    // 使用:scope确保只查找当前li的直接子元素，避免匹配深层列表
    if (li.querySelector(':scope > ul, :scope > ol')) {
      li.classList.add('has-submenu');
    }
  });
  

  这段代码能兼容几乎所有浏览器，逻辑清晰，不会误判深层嵌套的列表。

自定义Walker最常见的场景是后端生成导航列表（比如WordPress的导航菜单），核心逻辑是在生成li元素前，判断当前节点是否有子元素，再动态拼接类和属性。

我以WordPress的Walker_Nav_Menu为例（这是最常用的自定义Walker场景），给你写个示例：

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
  // 生成每个菜单项的li起始标签
  function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
    // 判断当前菜单项是否有子菜单
    $has_children = !empty($item->children);

    // 组装li的class数组
    $li_classes = array('menu-item');
    if ($has_children) {
      $li_classes[] = 'has-submenu'; // 自定义类
    }
    $class_string = implode(' ', $li_classes);

    // 生成li标签，同时根据是否有子项添加data-toggle属性
    $output .= sprintf(
      '<li class="%s" %s>',
      esc_attr($class_string),
      $has_children ? 'data-toggle="treeview"' : ''
    );

    // 下面是默认的菜单项链接生成逻辑，这里省略
    // ...
  }
}

解释一下关键点：

• $item->children是WordPress Walker里用来判断当前菜单项是否有子项的属性，不同的Walker实现可能属性名不同（比如有的是$item->has_children），根据你的实际场景调整即可。
• 把需要的自定义类放到数组里，再转成字符串，这样可以灵活添加多个类。
• 在拼接li标签时，通过三元运算符动态添加data-toggle="treeview"属性，没有子项的li就不会输出这个属性。

如果是你自己手写的递归Walker（比如处理数组生成列表），核心逻辑也是一样的，举个简单的PHP示例：

class Custom_List_Walker {
  public function generateList($items) {
    $output = '<ul>';
    foreach ($items as $item) {
      $has_children = !empty($item['children']);
      $li_class = $has_children ? 'has-children' : '';
      $data_attr = $has_children ? 'data-toggle="treeview"' : '';
      
      $output .= sprintf('<li class="%s" %s>', $li_class, $data_attr);
      $output .= htmlspecialchars($item['title']);
      
      // 如果有子元素，递归生成子列表
      if ($has_children) {
        $output .= $this->generateList($item['children']);
      }
      
      $output .= '</li>';
    }
    $output .= '</ul>';
    return $output;
  }
}

调用这个Walker生成列表时，所有包含子元素的li都会自动带上has-children类和data-toggle="treeview"属性。

内容的提问来源于stack exchange，提问作者Orkhan Hasanli