0

ツリーのトラバースを通じて、クリックされたアイテムの直接のサブメニューをキャプチャしようとしています。.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();
        });

    })
4

1 に答える 1

2

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;
});
于 2013-02-14T17:05:06.953 に答える