jQuery find方法失效：导航栏子无序列表无法正常显示

开发者阿泽

2026-5-25

问题分析与解决方案

嘿，我来帮你排查这个导航栏显示失效的问题～你的代码里有几个关键问题导致功能不工作，咱们一步步来修正：

1. 选择器的转义错误

你写的 $("\.kl > #nav__ul1-show") 里，类选择器的 . 不需要加反斜杠转义——jQuery里类选择器直接用 .类名 即可，多余的反斜杠会让选择器匹配不到目标元素。正确写法应该是：

$(".kl > #nav__ul1-show")

2. `find()` 方法的使用场景错误

find() 是用来查找当前元素的后代元素（也就是嵌套在它内部的子元素、孙元素等），但从你的需求来看，.nav__ul1 应该不是 #nav__ul1-show 的后代，而是它的兄弟元素或者父容器下的同级元素。

举个常见的导航结构例子：

<div class="kl">
  <button id="nav__ul1-show">点击展开菜单</button>
  <ul class="nav__ul1">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
  </ul>
</div>

这种情况下，.nav__ul1 是 #nav__ul1-show 的兄弟元素，你应该用 siblings() 方法来定位它，而不是 find()：

$(this).siblings(".nav__ul1").show();

如果你的HTML结构层级更深，比如 .nav__ul1 在父容器的其他分支里：

<div class="kl">
  <div class="nav-trigger">
    <button id="nav__ul1-show">点击展开菜单</button>
  </div>
  <ul class="nav__ul1">...</ul>
</div>

可以先通过 closest() 找到共同的父容器，再用 find() 定位目标列表：

$(this).closest(".kl").find(".nav__ul1").show();

修正后的完整代码

把这些问题修复后，你的jQuery代码应该是这样的：

$(document).ready(function(){ 
  $(".kl > #nav__ul1-show").click(function(){ 
    // 根据你的实际HTML结构选择其中一种写法
    $(this).siblings(".nav__ul1").show(); 
    // 或者 $(this).closest(".kl").find(".nav__ul1").show();
  }); 
});