Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2021, 04:33
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 32

Как пользоваться getBoundingClientRect ?
В общем делаю (просто так) аккордион

Столкнулся с неприятностью, я высчитываю высоту скрытого блока так
let h=parent.querySelector(".hidden").getBoundingClientRect().height;


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

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

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

Мой код здесь: https://codepen.io/topicstarter/pen/NWdKGzr
Ответить с цитированием
  #2 (permalink)  
Старый 22.03.2021, 07:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

открыть закрыть блоки
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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.03.2021, 07:07
Аспирант
Отправить личное сообщение для maxim1978 Посмотреть профиль Найти все сообщения от maxim1978
 
Регистрация: 07.05.2019
Сообщений: 32

спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 22.03.2021, 07:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,363

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;
                });
        });
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создается function Function(){} ? Cepairda Общие вопросы Javascript 0 10.02.2016 14:03
переманную как условие в if блок xas Общие вопросы Javascript 3 02.02.2016 20:17
initComponent: Как получить данные родителя и как получить store для вызова load()? Пролетарий ExtJS 76 04.07.2015 09:22
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 11:34