23.01.2018, 20:51
|
|
Новичок на форуме
|
|
Регистрация: 02.11.2017
Сообщений: 8
|
|
|
Поменять направление открытия спойлера
Самих вариантов реализации спойлера на сайте много, но все они при клике на "Читать подробнее..." открывают скрытый контент плавно вниз.
Как поменять направление вверх или вниз принудительно?
В чём сама проблема? На мобильных версиях сайта, ряд блоков выстраиваю в колону вертикально вместо "в ряд" как на ПК. Но при этом применяю еще css-свойство flex-direction: column-reverse;, чтобы поменять порядок расположения блоков. Т.е. не 123, а 321 расположить их на мобильных.
Но почему-то при клике на "Читать подробнее" браузер или JScript берут и вверх спойлер разворачивает, не вниз. Это из-за flex-direction: column-reverse;
Есть ли возможность в JScript менять принудительно направление открытия скрытого текста? Всегда вниз, при клике назначить...
Последний раз редактировалось AndreySW, 23.01.2018 в 20:58.
|
|
23.01.2018, 20:54
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
AndreySW,
сделайте минимальный макет
|
|
23.01.2018, 20:57
|
|
Новичок на форуме
|
|
Регистрация: 02.11.2017
Сообщений: 8
|
|
|
Не понял... Минимальный макет чего: у себя там шаблон сайта для мобильных менять?
|
|
24.01.2018, 01:59
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
AndreySW,
Нет, в этом форуме сделайте пример с минимально возможным кодом, для того чтобы показать нам суть проблемы!
|
|
24.01.2018, 18:15
|
|
Новичок на форуме
|
|
Регистрация: 02.11.2017
Сообщений: 8
|
|
Я извиняюсь, там ранее не понял что это просили дооформить пост.
Здесь как-то на форуме в комменты можно прикреплять, но воздержался. Так как застряну видать надолго.
Вот реализация на КодэПене - https://codepen.io/anon/pen/xpNWWa
Там когда узкое внизу окно просмотра готового результата, то как раз тот самый эффект нежелательный срабатывает.
Где секция "Второй блок". если нажать на Подробнее... то спойлер вверх открывает материал скрытый, не вниз.
Аналогично и на рабочем сайте, когда на мобильных - все эти Подробнее открываются вверх. некоторые вниз, когда как - в зависимости от расположения объекта на экране. |
|
24.01.2018, 18:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
AndreySW,
убрал лишнее ... если смотреть не в фрейме, глюков не обнаружил.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.wrap{
display:flex;
flex-direction:column-reverse;
flex-wrap:wrap-reverse;
align-items:flex-end;
align-content:center;
width:100%;
margin:auto;
}
.block{
width:60%;
display:block;
}
.block h3{
color:red;
}
.showmore{
cursor:pointer;
color:blue;
font-style:italic;
opacity:1;
}
.read-hide{
display:none;
width:65%;
}
.showmore.read{
opacity:0.5;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.showmore').click(function() {
$(this).toggleClass('read')
.next().slideToggle(600);
});
});
</script>
</head>
<body>
<div class="wrap">
<div class="block"><h2>Первый блок</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
<div class="showmore">Подробнее...</div>
<div class="read-hide">
<h3>Скрытый текст</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est. Alias, perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block"><h2>Второй блок</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
<div class="showmore">Подробнее...</div>
<div class="read-hide">
<h3>Скрытый текст</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est. Alias, perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="block"><h2>Третий блок</h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
<div class="showmore">Подробнее...</div>
<div class="read-hide">
<h3>Скрытый текст</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non enim velit sunt, corporis hic fugiat, totam deleniti, reprehenderit debitis consequuntur ipsum, ut nihil officiis. Laborum repudiandae earum est. Alias, perspiciatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</body>
</html>
|
|
24.01.2018, 19:27
|
|
Новичок на форуме
|
|
Регистрация: 02.11.2017
Сообщений: 8
|
|
Хмм.. Даже здесь на сайте, таже проблема если пробовать предложенный мною код в теме.
Подвиньте чуток вверх первую блок-секцию, и на жмите на "Подробнее". Спойлер вверх полезет, не вниз открывает. - http://prntscr.com/i502md
Там по сложности макета, нужно перевернуть блоки на сайте для мобильной версии. Если на ПК, то всё как надо работает спойлер. А вот, назначив блокам свойства "реверс порядка расположения", за одно и направление открытия спойлера меняется. Этакий... через чур могучий CSS-flexbox оказался, что-ли.
upd: т.е. если убрать "переворачивание блоков" - flex-direction: column-reverse;, поменять на flex-direction:column;
то спойлеры как надо работают: вниз открываются во всех случаях!
Последний раз редактировалось AndreySW, 24.01.2018 в 19:30.
|
|
29.01.2018, 18:02
|
|
Новичок на форуме
|
|
Регистрация: 02.11.2017
Сообщений: 8
|
|
Доброго времени тем, кто еще не читали эту тему.
Сформулирую немного иначе вопрос:
"Где в библиотеке jQuery v2.2.0 - https://ajax.googleapis.com/ajax/lib.../jquery.min.js , находится код анимации спойлера?"
Нужно поменять в коде сайта, или там в библиотеке направление открытия спойлера - вместо вниз, назначить вверх.
Тогда при перевороте блоков со скрытым текстом свойствами CSS (см. выше пример здесь же на форуме код от " Рони" где нажать на "Посмотреть!") содержимое будет открываться вниз, а не вверх как сейчас.
Последний раз редактировалось AndreySW, 29.01.2018 в 18:05.
|
|
29.01.2018, 20:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
|
|
29.01.2018, 23:16
|
|
Новичок на форуме
|
|
Регистрация: 02.11.2017
Сообщений: 8
|
|
|
рони,
Да-да, я также пришёл к выводу что в моём случаи/потребности это некий "особый случай". Тут стандартную библиотеку нет смысла править.
Или же использовать jQuery UI, подключив от него эффекты нужные, или вообще на чистом JS+СSS написать свою анимацию спойлера, минуя предложения от стандартных библиотек jQuery.
Добавлю разве что следующее, что реверс или смена порядка расположения блоков с помощью CSS, а это применяя FlexBox или CSS-Grid... Там оно переворачивает и логику анимации, идущей от jQuery. Не в каждом случаи, но как видим - бывает.
Последний раз редактировалось AndreySW, 29.01.2018 в 23:19.
|
|
|
|
