jqueryサブメニューの高さを取得

Question

私は以下のように<ul>タグを持っています。アンカーリンクをクリックすると、下のulリスト項目を含むdivが表示されます。アンカータグのクリック機能では、私はDIV（LI項目とULの実際には高さ）の完全な高さを取得する必要があり、サブメニュー

<ul> 
<li> 
<a></a> 
<div> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div> 
</li> 
</ul> 

htmlコードは以下の通りです：

<ul class="menu level-1 plain" id="header-menu"> 
    @{ 
     var i = 1; //Used for submenu ID 
    } 
    @foreach (var menuItem in Model.Header.TopLevelNavigation) 
    { 
     if (i < 6) 
     { 
      <li @Html.Raw(i > Model.MenuMidPoint ? "class=\"sub-menu-nudge-left\"" : "")> 
       @if (menuItem.ContentLink.HasChildPages()) 
       { 
        <a href="#sub-menu-@i" class="menu-link js-ui-header-all-menu-drill-down" aria-haspopup="true"> 
         <span class="icon icon-chevron-left @Model.GetBoxIcon(i)"></span> 
         <span>@menuItem.Name</span> 
        </a> 
        <div id="sub-menu-@i" class="sub-menu" aria-label="submenu" aria-hidden="true"> 
         @Html.DisplayEnumerableIContent("<ul class=\"level-2 plain\">{0}</ul>", "<li>{0}</li>", "menu-link", menuItem.ContentLink.GetChildPages(true, true)) 
        </div> 
       } 
      </li> 
     } 
     i++; 
    } 
</ul> 

私は以下のようにjquery関数を試しました： 私は以下のように試みましたが、私はサブメニューの高さを得ることができません。それは決してforeachループに全く入りません。誰でも助けてください

$(".menu-link").click(function() { 
var $subnavdev = $(this).parent().sublings('sub-menu').siblings('level-2 plain') 
var totalHeight = 0; 
    $subnavdev.find('li').each(function() { 
     totalHeight += $(this).outerHeight(true); 
    }); 
    alert(totalHeight); 
}); 

Answer 1

クラスセレクタの中には、正しく指定されていないものもあります。また、2行目にはすべて誤植があります。

更新 - また...あなたがそれらをするつもりとしてsiblings()方法が行動することはできませんようだ - そして、私はまだ.level-2セレクタ間違って持って - あなたがplain前に別の.を必要とするので。あなたがその親の中に入れ子になった.level-2.plainの項目を選び出すためにfind()を使用し、その後、（例えば、<li>）最も近い親に上がることができclosest()を使用することにより

を（例えば、以下を参照）。

あなた$(this)ハンドラ内の関数が.menu-linkアイテムがクリックされている（この場合、取り扱い要素を指していることに注意してくださいタイプミスがある

$(".menu-link").click(function() { 
    var $subnavdev = $(this).closest('li').find('.level-2.plain'); 
    // ... 
});