jquery - Jquery树遍历不起作用

Question

通过树遍历，我试图捕获单击项目的直接子菜单。我已经使用 .parent().siblings() 来获取元素。但不知何故，它不起作用。请帮我解决问题。这是html标记。

<ul class="menu">
<li class="1"><a href="#" class="menu-item">Link1</a></li>
<ul class="subMenu">
<li>Sublink11</li>
<li>Sublink12</li>
<li>Sublink13</li>
</ul>
<li class="2"><a href="#" class="menu-item">Link2</a></li>
<ul class="subMenu">
<li>Sublink21</li>
<li>Sublink22</li>
<li>Sublink23</li>
</ul>
<li class="3"><a href="#" class="menu-item">Link3</a></li>
<ul class="subMenu">
<li>Sublink31</li>
<li>Sublink32</li>
<li>Sublink33</li>
</ul>                    
</ul>

这是我用来捕获列表的 javascript 代码。

var menuItems = $('.menu-item');
    var icon = "<i class='icon icon-collapse'></i>";
    var innerMenu;
    $.each(menuItems, function(){
        $(this).append(icon);
        $(this).on('click', function(){
            console.log($(this).parent().closest('ul.subMenu'));
            //$(this).closest('ul.subMenu').show();
        });

    })

Answer 1

您的 HTML 无效。有效的 HTML 将是：

<ul class="menu">
   <li class="1">
      <a href="#" class="menu-item">Link1</a>
      <ul class="subMenu">
         <li>Sublink11</li>
         <li>Sublink12</li>
         <li>Sublink13</li>
      </ul>
   </li>
   <li class="2">
      <a href="#" class="menu-item">Link2</a>
      <ul class="subMenu">
         <li>Sublink21</li>
         <li>Sublink22</li>
         <li>Sublink23</li>
      </ul>
   </li>
   <li class="3">
      <a href="#" class="menu-item">Link3</a>
      <ul class="subMenu">
         <li>Sublink31</li>
         <li>Sublink32</li>
         <li>Sublink33</li>
      </ul>
   </li>
</ul>

jQuery：

$(".menu-item").click(function(){
   var closestMenu = $(this).next();
   console.log(closestMenu);
   return false;
});