Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.01.2018, 20:51
Новичок на форуме
Отправить личное сообщение для AndreySW Посмотреть профиль Найти все сообщения от AndreySW
 
Регистрация: 02.11.2017
Сообщений: 8

Поменять направление открытия спойлера
Самих вариантов реализации спойлера на сайте много, но все они при клике на "Читать подробнее..." открывают скрытый контент плавно вниз.

Как поменять направление вверх или вниз принудительно?
В чём сама проблема? На мобильных версиях сайта, ряд блоков выстраиваю в колону вертикально вместо "в ряд" как на ПК. Но при этом применяю еще css-свойство flex-direction: column-reverse;, чтобы поменять порядок расположения блоков. Т.е. не 123, а 321 расположить их на мобильных.

Но почему-то при клике на "Читать подробнее" браузер или JScript берут и вверх спойлер разворачивает, не вниз. Это из-за flex-direction: column-reverse;
Есть ли возможность в JScript менять принудительно направление открытия скрытого текста? Всегда вниз, при клике назначить...

Последний раз редактировалось AndreySW, 23.01.2018 в 20:58.
Ответить с цитированием
  #2 (permalink)  
Старый 23.01.2018, 20:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

AndreySW,
сделайте минимальный макет
Ответить с цитированием
  #3 (permalink)  
Старый 23.01.2018, 20:57
Новичок на форуме
Отправить личное сообщение для AndreySW Посмотреть профиль Найти все сообщения от AndreySW
 
Регистрация: 02.11.2017
Сообщений: 8

Не понял... Минимальный макет чего: у себя там шаблон сайта для мобильных менять?
Ответить с цитированием
  #4 (permalink)  
Старый 24.01.2018, 01:59
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

AndreySW,
Нет, в этом форуме сделайте пример с минимально возможным кодом, для того чтобы показать нам суть проблемы!
Ответить с цитированием
  #5 (permalink)  
Старый 24.01.2018, 18:15
Новичок на форуме
Отправить личное сообщение для AndreySW Посмотреть профиль Найти все сообщения от AndreySW
 
Регистрация: 02.11.2017
Сообщений: 8

Я извиняюсь, там ранее не понял что это просили дооформить пост.
Здесь как-то на форуме в комменты можно прикреплять, но воздержался. Так как застряну видать надолго.

Вот реализация на КодэПене - https://codepen.io/anon/pen/xpNWWa
Там когда узкое внизу окно просмотра готового результата, то как раз тот самый эффект нежелательный срабатывает.
Где секция "Второй блок". если нажать на Подробнее... то спойлер вверх открывает материал скрытый, не вниз.

Аналогично и на рабочем сайте, когда на мобильных - все эти Подробнее открываются вверх. некоторые вниз, когда как - в зависимости от расположения объекта на экране.
Ответить с цитированием
  #6 (permalink)  
Старый 24.01.2018, 18:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #7 (permalink)  
Старый 24.01.2018, 19:27
Новичок на форуме
Отправить личное сообщение для AndreySW Посмотреть профиль Найти все сообщения от AndreySW
 
Регистрация: 02.11.2017
Сообщений: 8

Хмм.. Даже здесь на сайте, таже проблема если пробовать предложенный мною код в теме.
Подвиньте чуток вверх первую блок-секцию, и на жмите на "Подробнее". Спойлер вверх полезет, не вниз открывает. - http://prntscr.com/i502md

Там по сложности макета, нужно перевернуть блоки на сайте для мобильной версии. Если на ПК, то всё как надо работает спойлер. А вот, назначив блокам свойства "реверс порядка расположения", за одно и направление открытия спойлера меняется. Этакий... через чур могучий CSS-flexbox оказался, что-ли.

upd: т.е. если убрать "переворачивание блоков" - flex-direction:column-reverse;, поменять на flex-direction:column;
то спойлеры как надо работают: вниз открываются во всех случаях!

Последний раз редактировалось AndreySW, 24.01.2018 в 19:30.
Ответить с цитированием
  #8 (permalink)  
Старый 29.01.2018, 18:02
Новичок на форуме
Отправить личное сообщение для AndreySW Посмотреть профиль Найти все сообщения от AndreySW
 
Регистрация: 02.11.2017
Сообщений: 8

Доброго времени тем, кто еще не читали эту тему.
Сформулирую немного иначе вопрос:

"Где в библиотеке jQuery v2.2.0 - https://ajax.googleapis.com/ajax/lib.../jquery.min.js , находится код анимации спойлера?"
Нужно поменять в коде сайта, или там в библиотеке направление открытия спойлера - вместо вниз, назначить вверх.

Тогда при перевороте блоков со скрытым текстом свойствами CSS (см. выше пример здесь же на форуме код от "Рони" где нажать на "Посмотреть!") содержимое будет открываться вниз, а не вверх как сейчас.

Последний раз редактировалось AndreySW, 29.01.2018 в 18:05.
Ответить с цитированием
  #9 (permalink)  
Старый 29.01.2018, 20:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

AndreySW,
http://api.jqueryui.com/slide-effect/
Ответить с цитированием
  #10 (permalink)  
Старый 29.01.2018, 23:16
Новичок на форуме
Отправить личное сообщение для AndreySW Посмотреть профиль Найти все сообщения от AndreySW
 
Регистрация: 02.11.2017
Сообщений: 8

рони,
Да-да, я также пришёл к выводу что в моём случаи/потребности это некий "особый случай". Тут стандартную библиотеку нет смысла править.
Или же использовать jQuery UI, подключив от него эффекты нужные, или вообще на чистом JS+СSS написать свою анимацию спойлера, минуя предложения от стандартных библиотек jQuery.

Добавлю разве что следующее, что реверс или смена порядка расположения блоков с помощью CSS, а это применяя FlexBox или CSS-Grid... Там оно переворачивает и логику анимации, идущей от jQuery. Не в каждом случаи, но как видим - бывает.

Последний раз редактировалось AndreySW, 29.01.2018 в 23:19.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите поменять адрес ссылки Kungan Общие вопросы Javascript 2 08.09.2013 00:50
Заголовок открытого спойлера был скрыт и наоборот soloveff jQuery 2 08.08.2013 22:18
Как поменять frame у компонента grid? khusamov ExtJS 5 14.05.2012 19:57
Отловить направление onmousemove event? jsuse Общие вопросы Javascript 20 29.01.2012 22:10
Как поменять SRC у Img в Pocket IE Maxidrom Events/DOM/Window 2 08.10.2008 15:05