Question

我的页面页脚中有一个菜单，其内容来自数据库。

HTML：

<footer>
    <ul>
        <li class="submenu">
            <a href="">Foo</a>
            <ol>
                <li><a href="">Lorem ipsum</a></li>
                <li><a href="">Lorem ipsum dolor sit amet, consectetur adipisicing...</a></li>
                <li><a href="">Lorem</a></li>
            </ol>
        </li>
    </ul>
</footer>

到目前为止：

$('footer .submenu').each(function(i){
    $('footer .submenu:eq('+i+') a:first').click(function(e){
        e.preventDefault();

        elem = $('footer .submenu:eq('+i+') li').length;

        alert(elem);

    });
});

我要做的是，当我点击第一个<a />时，它会返回<li>的总数。由于<li>是动态插入的，我不知道他们的height，我无法找到解决方法。有人能帮助我吗？

jsfiddle：http://jsfiddle.net/GwM5Q/2/

编辑--- 我忘了提到<ol>的高度为0并且有{c} overflow:hidden。我更新了jsfiddle链接，现在它有CSS。

我正试图通过.animate()获得点击动画的高度。我只是不知道如何获得<li>身高。

Answer 1

试试这个FIDDLE。我认为这是你正在寻找的，因为我能理解你的问题。它给出了单击的父li元素的高度。如果这不是所需的功能，请告诉我。

       $("body").on("click", ".submenu a", function(e){
            e.preventDefault();

            elem = $(e.currentTarget).closest('li').height();

            alert(elem);

        });

Answer 2

<强> FIDDLE

这假设你想要所有li的高度。只需循环遍历它们并总结它们各自的高度。

    $('footer .submenu').each(function(i){
        $('footer .submenu:eq('+i+') a:first').click(function(e){
            e.preventDefault();
            var height = 0;
            $('footer .submenu:eq('+i+') li').each(function() {
                height += $(this).height();
            });

            alert(height);

        });
    });

如何计算所有李的总高度？

2 个答案: