嵌套UL高度

Nested UL Height

本文关键字：高度 UL 嵌套      更新时间：2024-05-11

我有一个带有嵌套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/

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

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

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

您使用next（）的代码不起作用，因为ul没有下一个元素。next()不是通过$('ul ul ul')集合的迭代器，而是在dom树中获得下一个sibbling。

试试这个：

$(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

相关文章：