Question

我有<ul>标记，如下所示。单击锚链接时，它应显示一个div，下面是ul列表项。在锚标签的点击功能上，我需要获得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。（见下面的例子）

使用closest()方法，您可以前往最近的父级（例如<li>），然后使用find()选择嵌套的所有.level-2.plain项目在那个父母中。

请记住，处理程序函数中的$(this)引用了被处理的元素，（在这种情况下，单击了.menu-link项。

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

jquery获取子菜单的高度

1 个答案: