Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2023, 10:05
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

Спойлер / Подкат от трёх строк
Привет!
Подскажите кто-нибудь пожалуйста как быть?

У меня список вот из таких пунктов

Код:
<div className="xitem">
        <div className="main">
            <div className="tag">test</div>
            <div className="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
                took a galley of type and scrambled it to make a type specimen book. It has survived not only five
                centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
</div>

Нужно чтобы при открытии было видно только 3 строки а при клике на пункт он плавно на весь текст разворачивался. =(

вот что пока есть

const items = document.querySelectorAll('.xitem');

    items.forEach(item => {
        item.addEventListener('click', function() {
            items.forEach(elem => elem.classList.remove('active'));
            this.classList.add('active');

            $(this).find('.value').css({'max-height':'3em'});
            $(this).find('.value').css({'height':'3em'});


            $(this).find('.value').slideToggle( "slow", function() {

                $(this).find('.value').css({'max-height':'10em'});
                $(this).find('.value').css({'height':'10em'});

            });

        });
    });
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2023, 10:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Cleo
className
???
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2023, 10:23
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

Сообщение от рони Посмотреть сообщение
???
сорри.. ну просто у меня там класс конечно... случайно тут так написал
Ответить с цитированием
  #4 (permalink)  
Старый 05.06.2023, 10:24
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

это мне редактор автозаменой направил
Ответить с цитированием
  #5 (permalink)  
Старый 05.06.2023, 10:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Спойлер открытие блока на всю его высоту
Cleo,

<!DOCTYPE HTML>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .xitem {
            width: 250px;
        }

        .value {
            max-height: 3em;
            overflow: hidden;
            transition: max-height 1s;
        }

        .xitem.active .value {
            max-height: var(--h);
        }
    </style>
</head>

<body>
    <div class="xitem">
        <div class="main">
            <div class="tag">test</div>
            <div class="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="xitem">
        <div class="main">
            <div class="tag">test</div>
            <div class="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="xitem">
        <div class="main">
            <div class="tag">test</div>
            <div class="value">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <script>
        const items = document.querySelectorAll('.xitem');
        items.forEach(item => {
            item.addEventListener('click', (event) => {
                if (event.target.closest('.tag'))
                    items.forEach(el => el == item ? el.classList.toggle('active') : el.classList.remove('active'))
            })
            let h = item.querySelector('.value').scrollHeight;
            item.style.setProperty('--h', `${h}px`)
        })
    </script>
</body>

</html>
Ответить с цитированием
  #6 (permalink)  
Старый 05.06.2023, 10:47
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

Большое спасибо! вы просто умничка

вижу способ другой но сейчас буду разбираться
Ответить с цитированием
  #7 (permalink)  
Старый 05.06.2023, 14:53
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

Рони ещё раз большое спасибо!

код классный вот только одна проблема
получаю вот let h = item.querySelector('.value').scrollHeight;
высоту value далее её передаю

в ФФ всё хорошо а вот хром иногда строку напополам режет(( не хватает высоты((

по ширине всё выровнено.. кол-во слов в строке одинаковое.. но высота получается в разных браузерах разная =( в чём может быть проблема?
вы с этим кодом работали.. знаете наверняка в чём минус =(
Ответить с цитированием
  #8 (permalink)  
Старый 05.06.2023, 15:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Cleo,
возможно в вашем коде есть картинки, где-то они закешировались как в ФФ, а где-то ещё нет, и надо тогда обернуть весь код так

window.addEventListener('load', () => {
           // сюда весь код js
        })
Ответить с цитированием
  #9 (permalink)  
Старый 05.06.2023, 16:18
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

КРУУУУТО!!!! получилось! большущие спасибо!!
Ответить с цитированием
  #10 (permalink)  
Старый 08.06.2023, 04:53
Интересующийся
Отправить личное сообщение для Cleo Посмотреть профиль Найти все сообщения от Cleo
 
Регистрация: 05.06.2023
Сообщений: 11

Сообщение от рони Посмотреть сообщение
Cleo,
возможно в вашем коде есть картинки, где-то они закешировались как в ФФ, а где-то ещё нет, и надо тогда обернуть весь код так

window.addEventListener('load', () => {
           // сюда весь код js
        })
Рони ещё здравствуйте)) можно я вас опять немного отвлеку??

Посмотрите пожалуйста небольшая проблемка возникла..
если на телефоне меняешь ориентацию с горизонтального режима на вертикальный или наоборот то спойлер не работает...
в общем будет работать только в том режиме который был при загрузке.. что собственно логично тк у нас евент Load
я сделал вот так на ориентайшенЧендж:

function spoiler() {
        const items = document.querySelectorAll('.tagitem');
        items.forEach(item => {
            item.addEventListener('click', (event) => {
                if (event.target.closest('.value'))
                    items.forEach(el => el == item ? el.classList.toggle('active') : el.classList.remove('active'))
            })
            let h = item.querySelector('.value').scrollHeight;
            item.style.setProperty('--value_height', `${h}px`);

        });
    }


    window.addEventListener('load', () => {
        spoiler();
    });

    window.addEventListener('orientationchange', () => {
        spoiler();
    });


Но всё равно почему то не работает =( в чём тут может быть проблема? =(
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение строк у TextArea Alikberov Элементы интерфейса 47 17.09.2022 13:35
selectionrange для нескольких строк Was-Ja Элементы интерфейса 9 05.11.2020 19:43
Добавление строк в таблицу и скрытие таблицы. III Общие вопросы Javascript 39 20.11.2015 10:05
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
Как включить синхронное выполнение строк? SkaN Элементы интерфейса 1 26.04.2012 22:28