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;
});