Форум

maxim1978 · #1 (**permalink**) 22.03.2021, 05:33

В общем делаю (просто так) аккордион

Столкнулся с неприятностью, я высчитываю высоту скрытого блока так

let h=parent.querySelector(".hidden").getBoundingClientRect().height;

Но при присваивании этой высоты родительскому блоку она обрезается - я где то ошибся но не пойму где ...

Приходиться прибавлять какую то цифру ..к примеру я прибавил 70

Как победить эту ситуацию ?

Мой код здесь: https://codepen.io/topicstarter/pen/NWdKGzr

рони · #2 (**permalink**) 22.03.2021, 08:03

maxim1978,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            max-width: 640px;
            margin: auto;
        }

        .wrapper input[type="checkbox"] {
            display: none;
        }

        label {
            display: block;
            height: 50px;
            line-height: 50px;
            user-select: none;
            cursor: pointer;
            background: #ccc;
            color: #fff;
            padding-left: 20px;
            border-bottom: 2px solid #000;
            margin-bottom: 10px;
        }

        .item {
            height: 50px;
            transition: 0.34s linear;
            overflow: hidden;
        }

        .hidden img,
        .hidden video {
            float: left;
            margin-right: 20px;
        }
    </style>
    <script>
        window.addEventListener("load", function() {
            document
                .querySelectorAll(".item")
                .forEach(function(el, i) {
                    let hide = el.clientHeight;
                    let show = el.scrollHeight;
                    el.addEventListener("change", function(event) {
                        el.style.height = (event.target.checked ? show : hide) + "px";
                    });
                });

        });
    </script>
</head>

<body>
    <div class="wrapper">
        <div class="item">
            <label><input type="checkbox">Пункт 1</label>
            <div class="hidden">
                <img src="http://placehold.it/200x100" alt="">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem eum, aliquid amet voluptas nihil id cumque impedit debitis consectetur neque nostrum officiis perspiciatis inventore illo quasi voluptates ipsum distinctio harum doloribus! Placeat earum distinctio, magni ipsam velit exercitationem facilis maiores aliquam. Omnis rem porro delectus? Nam ut dolore sequi perferendis.</p>
            </div>
        </div>
        <div class="item">
            <label><input type="checkbox">Пункт 2</label>
            <div class="hidden">
                <video src="#" controls></video>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus velit sapiente enim, eum temporibus, veritatis et blanditiis aperiam asperiores reprehenderit magni, modi maxime. Magni adipisci veritatis architecto at asperiores suscipit sequi unde corrupti, facilis molestiae impedit. Repellendus adipisci alias itaque dignissimos magnam quod expedita, ipsum saepe fuga consequatur cum molestias maiores hic deleniti dolores iusto. At ut, atque et quo possimus ipsam voluptate voluptates quia quidem placeat excepturi officia dolorum. Iusto amet quia mollitia repellendus quos necessitatibus itaque ratione atque in, reprehenderit pariatur iste laboriosam recusandae ipsum dolor blanditiis nobis quo praesentium impedit eligendi eveniet voluptates numquam est quod. Molestiae?
            </div>
        </div>
    </div>
</body>

</html>

maxim1978 · #3 (**permalink**) 22.03.2021, 08:07

спасибо

рони · #4 (**permalink**) 22.03.2021, 08:22

maxim1978,
можно чуть покороче )))

window.addEventListener("load", function() {
            document
                .querySelectorAll(".item")
                .forEach(function(el, i) {
                    el.addEventListener("change", function(event) {
                        let height = event.target.checked ? (el.scrollHeight + "px") : "";
                        el.style.height = height;
                    });
                });

        });

или ещё покороче)))

window.addEventListener("load", function() {
            document
                .querySelector(".wrapper")
                .addEventListener("change", function(event) {
                        let el = event.target.closest(".item");
                        let height = event.target.checked ? (el.scrollHeight + "px") : "";
                        el.style.height = height;
                });
        });

Форум

Справочник

Discord чат

Курсы javascript