jquery получить высоту подменю

Question

У меня есть тег <ul>, как показано ниже. При нажатии на ссылку привязки он должен отображать div с элементами списка ul внизу. О функции мыши якорный тег, мне нужно, чтобы получить полную высоту DIV (на самом деле высота ул с пунктами Li), подменю

<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).

Update - Кроме того, представляется, что siblings() методы не могут вести себя, как вы собираетесь их ... - И я получил неправильно .level-2 селектор еще - так как вам нужно еще . перед plain. (Смотрите ниже примера)

С помощью closest() вы можете идти до ближайшего родителя (например, <li>), а затем использовать find(), чтобы выбрать все элементы .level-2.plain вложенных в пределах этого родителя.

Помните, что ваш $(this) внутри обработчика функция относится к перекачиваемому элементу (в данном случае .menu-link детали будучи щелкнула

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