Question

我正在使用ul容器创建导航结构，该容器包含一些li项，而li元素具有<a>类toggle类。在<a>元素下面还有ul容器，其类名为inner。我正在做的是当我点击任何<a>元素时，会调用click事件。在那个事件中，我计算inner类具有的所有子项的高度，但是当我想将该计算高度设置为该内部类的css属性时，它不会完全展开。

参见代码：

    function CallBackFunction() {

        var elm = $(this);

        var height = 0;

        elm.next().children().each(function () {

            height = height + $(this).outerHeight(true);
        });

        elm.next().css('max-height', height);


    }


    $('.toggle').click(CallBackFunction);

        .parent {
            border: 1px solid black;

        }

        .inner {
            max-height: 0;
            overflow: hidden;
            transition: max-height 300ms ease-in-out;
        }

        a:hover {
            cursor: pointer;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<html lang="en">
<head>
</head>
<body>

<ul class="parent">

    <li>
        <a class="toggle">Link 1</a>
        <ul class="inner">

            <li>
                <p>Dummy Text</p>

            </li>

            <li>
                <a class="toggle">Nested Link</a>
                <div class="inner">
                    <p>Again Dummy Text</p>
                </div>
            </li>

        </ul>

    </li>
</ul>

</body>
</html>

Answer 1

在css中添加此代码

ul.inner>li {
    float: left;
    width: 100%;
}

此处li未达到p的高度，因此需要浮动li

function CallBackFunction() {

        var elm = $(this);

        var height = 0;

        elm.next().children().each(function () {

            height = height + $(this).outerHeight(true);

        });
        elm.next().css('max-height', height);


    }


    $('.toggle').click(CallBackFunction);

 .parent {
            border: 1px solid black;

        }

        .inner {
            max-height: 0;
            overflow: hidden;
            transition: max-height 300ms ease-in-out;
        }
ul.inner>li {
    float: left;
    width: 100%;
}

        a:hover {
            cursor: pointer;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="parent">

    <li>
        <a class="toggle">Link 1</a>
        <ul class="inner">

            <li>
                <p>Dummy Text</p>

            </li>

            <li>
                <a class="toggle">Nested Link</a>
                <div class="inner">
                    <p>Again Dummy Text</p>
                </div>
            </li>

        </ul>

    </li>
</ul>

嵌套元素高度未正确计算

1 个答案: