javascript - 嵌套 UL 高度

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 树中的下一个兄弟节点。