jquery獲取子菜單的高度

-1

我有<ul>標籤如下。當點擊錨鏈接時，它應該顯示一個帶有ul列表項的div。在錨標記的點擊功能，我需要得到div的完整高度（其實李項UL的高度），子菜單jquery獲取子菜單的高度

<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="#[email protected]" 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="[email protected]" 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); 
});

來源

2016-09-05 Rama

有一個錯字：'sublings（）' - 這是在你的代碼，或者複製/粘貼人工製品？ – ne1410s

另外，您可能想要引用類名稱？使用'.'前綴：例如'.siblings（'。sub-menu'）...' – ne1410s

你的一些類選擇沒有被正確指定的，再加上有一個打字錯誤（全部在2號線）。

更新 - 它也似乎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'); 
    // ... 
});

來源

2016-09-05 11:21:59 ne1410s

我試過了你的代碼。它不會進入每一個循環。 – Rama

你好 - 我已經有了新的眼睛，讓我知道如何 - 我決心立即解決這個問題！ - 如果我的最新建議不起作用，會它可以粘貼ren請指定html - 而不是剃刀標記。 :) – ne1410s

jquery獲取子菜單的高度

回答

相關問題