Прошу прощения много статей в интернете на эту тему но никак не могу сообразить
я использую простой скрипт для сворачивания и разворачивания блоков div в нутри родителя но не как не могу сообразить что нужно сделать чтоб по клику он сначала сворачивал предыдущий блок а потом открывал новый.
- Вопрос задан более года назад
- 2114 просмотров
AngReload, спасибо да работает но вот я не придусматрел такое ели я зачу поменять
karpos, код с пояснениями
Всю документацию по всяким штукам вроде slideToggle можно найти на сайте https://api.jquery.com/
Или на русском языке на вики-сайте jquery.page2page.ru
Поочередное разворачивание и сворачивание элементов
да огромное спасибо.
я в прошлый раз допустил ошибку
суть в то что pointer-box это родительский блок и если кликнуть случайно внутри него по любому месту он закроется а это не удобно если внутри блока много текста я решил ввести событие по клику по блок pointer
но тогда получается что блок pointer-text уже не является дочерним он следующий или предыдущий. с раскрытием и закрытием проблем не вознилом я просто .childrenпоменял на .prev . а вот как свернуть все не активные блоки опять не получается пробывал поменять на .prev не получилось
karpos, не пользуйтесь чужим кодом бездумно, посмотрите что он делает.
Что делает $(this).siblings() ? Он выбирает соседей кликнутого блока. В этом html:
this — это .pointer
Для него находим соседей, у него три соседа:
Так мы выбрали все блоки для сворачивания, то что нужно.
Но теперь HTML новый, что сделает всё тот же $(this).siblings() ? Он выбирает соседей кликнутого блока. В этом html:
this — это .pointer
Для него находим соседей, у него только один сосед
Очевидно, мы пошли куда-то не туда, ведь нам нужно было добраться до соседних .pointer-box
Совет:
Вы можете пользоваться console.log() для того чтобы понять как работает ваш код. Например:
— этот код покажет в консоли браузера коллекции элементов на каждом этапе. Так вы смогли бы сами сразу понять где ошиблись или куда идти дальше.
Чтобы их достичь, нужно сначала из this === .pointer добраться до .pointer-box
Это можно сделать с помощью метода parent() — http://jquery.page2page.ru/index.php5/Поиск_элемен.
Новый код $(this).parent().siblings()
this — это .pointer
Для него находим родителя
Ну и .children(".pointer-text") выберет в этих блоках именно то что нужно сверуть.
Но я бы переписал, чтобы не использовать метод prev():
Ну и вторую чать кода можно попроще сделать, без блужданий вперёд и назад:
Есть текст, который сворачивается по нажатию иконки и разворачивается. Мне нужно, чтобы он на экранах компьютера был обычным, без иконки, а в responsive версии сворачивался и разворачивался. Есть идеи как это реализовать?
2 ответа 2
Воспользуйтесь правилом @media .
- По просьбе автора вопроса изменил на картинки.
- Убрал span.read-more-button-icon за ненадобностью.
.read-more-button .read-more-button-icon и .read-more-state
.read-more-button .read-more-button-icon (если смотреть по моей реализации). – Nikita A. Slutsky 8 дек ’18 в 11:12
Инструкция скрыть часть текста и показать его при клике. Скачать готовый скрипт readmore.
- ГлавнаяНовости статьиjQuery , Разные заметки разработчика Как свернуть развернуть текст на сайте. Скрипт.
Как свернуть развернуть текст на сайте. Скрипт.
- 4.6/5
- 8 оценок
Очень плохо! | Плохо | Нормально | Хорошо | Очень хорошо! |
---|---|---|---|---|
0% | 0% | 12.5% | 12.5% | 75% |
Приветствую Вас на страницах нашего сайта. В сегодняшней статье мы будем говорить о возможности сворачивать (скрывать) текст на сайте, а при клике по ссылке показывать полный текст.
Очень часто для экономии места на сайте, или же просто для более презентабельного вида, требуется показать пользователю только часть текста, то есть свернуть развернуть текст. Особенно часто я это применяю при разработке интернет магазина в категориях, то есть, если Вам нужно в описании категории свернуть большой текст и развернуть его при клике, показать полное описание, то данная статья именно то что вам нужно.
После прочтения данной статьи вы уже будете знать как скрыть часть текста на сайте а при клике на ссылку показать полный текст. Думаю вы так же сталкивались с проблемой когда очень много текста надо скрыть но в то же время дать пользователю возможность прочитать больше, данная статья поможет вам понять главный принцип как скрыть текст в readmore.
Скрипт скрывающий большой текст, очень полезная функция а иногда даже необходимая, по этому мы сегодня и будем рассматривать вариант создания скрипта который будет сворачивать текст если он превышает заданную в настройках высоту. То есть если ваш текст будет иметь высоту блока больше чем вы зададите в настройках то будет появляться ссылка при клике на которую будет разворачиваться полный текст описания, в случае если же ваш текст не достигнет заданной в настройках высоты данная ссылка появляться не будет.
И так, сам скрипт "скрытый текст под спойлером" и пример его работы вы можете скачать и посмотреть внизу под данной статьей, а в самой статье мы рассмотрим некоторые из его функций и настроек.
Функция самого простого вызова скрипта выглядит так: