Question

我有一个嵌套UL的菜单作为下拉菜单。在下拉列表中，我有另一个嵌套的UL和LI，它们是实用生成的，因此我不知道它们中有多少个。

我试图在加载时设置第二个UL的高度，以便我可以在下拉列表周围放置边框。

HTML：

<ul>
    <li>1</li>
    <li>2
        <ul>
            <li>2a
                <ul class="submenu">
                    <li>2a1</li>
                    <li>2a2</li>
                    <li>2a3</li>
                    <li>2a4</li>
                    <li>2a5</li>
                </ul>
            </li>
            <li>2b
                <ul class="submenu">
                    <li>2b1</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                    <li>2b2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>3</li>
</ul>

CSS：

    ul {
        list-style-type: none;
    }

        ul li {
            display: inline-block;
            /*float: left;*/
            width: 100px;
        }

            ul li:hover {
                background-color: #cc0505;
                color: white;
            }

            ul li ul {
                /*visibility: hidden;*/
                position: absolute;
                padding: 0px;
                border: 2px solid black;
                /*min-height:120px;*/
            }

            ul li:hover ul {
                visibility: visible;
            }

            ul li ul li {
                /*display: inline;
                float: left;*/
                color: black;
            }

                ul li ul li:hover {
                    background-color: white;
                    color: black;
                }

                ul li ul li ul {
                    border: none;
                    min-height:0px;
                }

                    ul li ul li ul li {
                        display: block;
                        /*float: none;*/
                    }

                        ul li ul li ul li:hover {
                            background-color: #cc0505;
                            color: white;
                        }

我尝试使用$('ul ul ul').each和$('ul ul ul').next()来遍历第三级的任何UL，但它似乎只是第一次出现。

我用我的代码设置了一个jsfiddle，并尝试了几次尝试。 http://jsfiddle.net/kZ236/2/

Answer 1

问题是，无论你在调用之前做了什么，height（）总是占用集合的第一个元素的高度。

将each()与Math.max一起使用

http://jsfiddle.net/kZ236/3/

你的代码与next（）没有用，因为ul没有下一个元素。 next()通过$('ul ul ul')的集合不是迭代器，而是在dom树中进行下一次sibbling。

Answer 2

试试这个：

$(document).ready(function () {
    $('#nav>li>ul').each(function(){
        var maxHt=0;
        $(this).find('.submenu').each(function(){
            var bottomPosition=$(this).height() +$(this).position().top
            maxHt= bottomPosition>maxHt ? bottomPosition : maxHt;
        });

        $(this).height( maxHt)
    })
})

的 DEMO

嵌套的UL高度

2 个答案: