Спойлер / Подкат от трёх строк
Привет!
Подскажите кто-нибудь пожалуйста как быть? У меня список вот из таких пунктов Код:
<div className="xitem">Нужно чтобы при открытии было видно только 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'});
});
});
});
|
Цитата:
|
Цитата:
|
это мне редактор автозаменой направил
|
Спойлер открытие блока на всю его высоту
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>
|
Большое спасибо! :dance: вы просто умничка :victory:
вижу способ другой но сейчас буду разбираться :write: |
Рони ещё раз большое спасибо!
код классный вот только одна проблема получаю вот let h = item.querySelector('.value').scrollHeight; высоту value далее её передаю в ФФ всё хорошо а вот хром иногда строку напополам режет(( не хватает высоты(( по ширине всё выровнено.. кол-во слов в строке одинаковое.. но высота получается в разных браузерах разная =( в чём может быть проблема? вы с этим кодом работали.. знаете наверняка в чём минус =( |
Cleo,
возможно в вашем коде есть картинки, где-то они закешировались как в ФФ, а где-то ещё нет, и надо тогда обернуть весь код так
window.addEventListener('load', () => {
// сюда весь код js
})
|
КРУУУУТО!!!!:dance: получилось! большущие спасибо!!
|
Цитата:
Посмотрите пожалуйста небольшая проблемка возникла.. если на телефоне меняешь ориентацию с горизонтального режима на вертикальный или наоборот то спойлер не работает... в общем будет работать только в том режиме который был при загрузке.. что собственно логично тк у нас евент 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();
});
Но всё равно почему то не работает =( в чём тут может быть проблема? =( |
| Часовой пояс GMT +3, время: 21:48. |