Question

在我的网页上，我有折叠和关闭的手风琴面板。我已将页面高度设置为具体。但是，我希望它从一开始就具体，但是当我打开和关闭面板时能够扩展，这样我就不必将页面设置得太长而没有内容。关于我如何做这个的任何想法？

这只是我使用的一个例子，这是目前身高较小的原因。

我当前的代码：

 <!doctype html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta charset = "utf-8">
        <title>London Tour Guide</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

        <script src="jquery.js"></script>

        <style>
            div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
                background-color: white; }

            div.content {
                width: 700px; height: 120px;
                background-color: lightblue; padding: 5px; }

            button.accordion {
                background-color: #eee;
                color: #444;
                cursor: pointer;
                padding: 18px;
                width: 100%;
                border: none;
                text-align: left;
                outline: none;
                font-size: 15px;
                transition: 0.4s;
            }

            button.accordion.active, button.accordion:hover {
                background-color: #ddd;
            }

            div.panel {
                padding: 0 18px;
                display: none;
                background-color: white;
            }

            div.panel.show {
                display: block;
            }




        </style>
    </head>
    <body>

    <div class="container">
        <div class = "content">


            <button class="accordion">Panel</button>
            <div class="panel">
                Hello
            </div>
            <button class="accordion">Panel 2</button>
            <div class="panel">
                Hello
            </div>

            <script>
                var acc = document.getElementsByClassName("accordion");
                var i;

                for (i = 0; i < acc.length; i++) {
                    acc[i].onclick = function(){
                        this.classList.toggle("active");
                        this.nextElementSibling.classList.toggle("show");
                    }
                }
            </script>

        </div>
    </body>
    </html>

Answer 1

如果我理解正确，

您在[{1}}

上寻找min-height:1300px而不是height:1300px

Answer 2

不使用Javascript的最强大的方法是摆脱在CSS中明确设置容器的高度 - 这样高度将自动地符合子元素的总高度。

如果您的容器没有绝对定位，我相信Vlad很高兴使用CSS属性min-height将会适用。

如果您的容器必须绝对定位，您可以通过onClick处理程序中的jQuery获取展开面板的高度，并向容器添加/减去高度。

折叠手风琴面板时如何扩展HTML网页？

2 个答案: