Развернуть / Свернуть текст
Однако, если этот код дублируется несколько раз, текст «Свернуть» появляется и не исчезает, а фактически конфликтует с «Развернуть», чтобы показать еще больше текста, а не сворачиваться, как следует.
В этом http://jsfiddle.net/syEM3/4/ нажмите на любой из Нажмите здесь, чтобы ЧИТАТЬ ДАЛЕЕ. Обратите внимание, как текст «Свернуть» отображается внизу абзацев и не исчезает. Нажмите на Свернуть, и это покажет больше текста.
Как мне предотвратить это и заставить работать как надо?
4 ответа
Два вызова функции slideDown не относятся к .reveal и / или .collapse, которые вы в данный момент делаете. то есть
Найдет все элементы с классом .collapse на странице и сдвинет их вниз. независимо от того, какой элемент вы только что нажали.
Я бы изменил вызов slideDown, чтобы он соответствовал элементу, который вы только что щелкнули, т.е.
Когда вы делаете $(«.collapse»).slideDown(100); , jQuery запускает slideDown для всего с классом .collapse, а не только для того, что связано с вашим текущим this. Чтобы исправить это, обратитесь к свертку в зависимости от его расположения на $(this) .
Сделайте это, используйте что-то вроде $(this).siblings(«.collapse»).slideDown(100);
Обратите внимание, что этот конкретный селектор будет работать только в том случае, если вы заключите каждый текстовый блок в отдельный div. С каждым текстовым элементом в своем собственном div, как у вас сейчас, .siblings(«.collapse») , который выбирает всех братьев и сестер $(this) с классом collapse , все равно выберет оба из <
Эти две строки не делают то, что вы хотите, поскольку они действуют на все элементы указанного класса
Хорошо, я думаю, что вы должны принять другой подход к вашей проблеме.
Видите, у jQuery в основном две цели:
- Выбор одного или нескольких элементов DOM на вашей HTML-странице
- манипулировать выбранными элементами каким-либо образом
Это может повторяться несколько раз, так как функции jQuery являются цепочечными (это означает, что вы можете вызывать функцию после функции после функции . ).
Если я правильно понял вашу проблему, вы пытаетесь создать список постов в блоге и отображать только их тизеры.
После того, как пользователь нажимает кнопку «читать дальше», вся статья раскрывается.
Имейте в виду: jQuery выбирает ваши элементы так же, как CSS. Это позволяет очень просто составить запрос для определенных элементов, но вам нужно правильно структурировать свой HTML, как это делается по причинам форматирования.
Поэтому я предлагаю вам использовать эту базовую разметку для каждой из ваших статей (заголовок, HTML5 на работе!):
Вы можете заменить элементы article и section элементами div , если хотите.
И вот CSS для этой разметки:
То, как мы создали разметку и CSS, позволяет нам разместить под ней несколько статей.
Хорошо, вы, возможно, заметили: я полностью опустил все кнопки «читать дальше» или «свернуть». Это сделано намеренно.
Если кто-то заходит на сайт блога с отключенным javascript (может быть, поисковой системой или старым мобильным телефоном, который не поддерживает JS или что-то еще), логика будет нарушена. Кроме того, многие фрагменты текста, такие как «читать дальше» и «свернуть», не имеют значения, если они на самом деле ничего не делают и не являются частью статьи.
Изначально тело статьи не скрыто, поскольку мы нигде не применяли класс hidden . Если бы мы встроил его в HTML, и у кого-то действительно нет JavaScript, он не сможет ничего прочитать.
Добавление немного магии jQuery
Внизу страницы мы встраиваем библиотеку jQuery из Google CDN.
Это лучшая практика, которая обычно ускоряет загрузку вашей страницы. Поскольку МНОГИЕ веб-сайты встраивают jQuery через этот URL-адрес, высока вероятность того, что он уже находится в кэше браузера посетителей и его не нужно загружать в другой раз.
Обратите внимание, что http: в начале URL-адреса опущено. Это заставляет браузеры использовать текущий протокол страниц, это может быть http или https . Если вы попытаетесь встроить библиотеку jQuery по протоколу http на веб-сайт https , некоторые браузеры откажутся загружать файл из незащищенного соединения.
После того, как вы включили jQuery на страницу, мы добавим нашу логику в тег скрипта. Обычно мы сохраняем логику в отдельный файл (снова кеширование и что-то еще), но на этот раз блок скрипта будет работать нормально.
Наконец, немного JavaScript
Сначала мы хотим скрыть все элементы с помощью css-класса full , так как должны отображаться только тизеры. Это очень легко с jQuery:
Начало сценария $(‘.full’) говорит jQuery: мне нужны все элементы с CSS-классом full . Затем мы вызываем функцию с таким результатом, именуя hide() , цель которой должна быть ясна.
Хорошо, на следующем шаге мы хотим добавить несколько кнопок «читать дальше» рядом с каждым тизером. Это тоже легкая задача:
Теперь мы выбираем каждый элемент с помощью css-класса teaser и добавляем некоторый HTML-код after() к каждому элементу — кнопку с css-классом more .
На следующем шаге мы сообщаем jQuery наблюдать клики на каждой из этих вновь созданных кнопок. Когда пользователь нажал, мы хотим расширить следующий элемент с помощью css-класса full после нажатой кнопки.
Фу, что мы здесь сделали? Сначала мы сказали jQuery, что хотим манипулировать this , который является ссылкой на нажатую кнопку. Тогда мы сказали jПросьба медленно скрыть эту кнопку (так как она больше не нужна) с помощью slideUp() .
Мы сразу же продолжили говорить jQuery, что делать: теперь возьмите элемент next() (с классом css full ) и сделайте его видимым, сдвинув его вниз с помощью slideDown() .
В этом сила цепочки jQuery!
Снова прячемся
Но подождите, вы хотели снова иметь возможность свернуть статьи! Итак, нам также нужна кнопка «Свернуть» и еще немного JavaScript:
Примечание: мы не использовали функцию after() , чтобы добавить эту кнопку, но функцию append() , чтобы разместить кнопку ВНУТРИ каждого элемента с классом css full , а не рядом с ним. Это потому что мы хотим кнопки свертывания, которые будут скрыты с полными текстами, тоже.
Теперь нам нужно предпринять некоторые действия, когда пользователь нажимает одну из этих кнопок:
Теперь это было легко: мы начнем с элемента button, переместим фокус на его parent() (который является элементом, содержащим полный текст) и скажем jQuery скрыть этот элемент, сдвинув его вверх с помощью <
Затем мы перемещаем фокус из полнотекстового контейнера в его предыдущий элемент с помощью css-класса more , который является его кнопкой расширения, которая была скрыта при расширении текста. Мы медленно показываем эту кнопку снова, вызывая slideDown() .
Как свернуть текст в html
Профиль
Группа: Участник
Сообщений: 88
Регистрация: 8.3.2008
Репутация: нет
Всего: 1
Хочу сделать как бб код скрытый текст.. например как это выглядит в админке
ВИД В АДМИНКЕ
Текст текст текст короткий текст и так далеее еще текст [ SPOILER ]остальной текст продолжение рас рас рас[ /SPOILER ]
ВИД СВЕРНУТЫЙ
Текст текст текст короткий текст и так далеее еще текст (подробнее. )
ВИД РАЗВЕРНУТЫЙ
Текст текст текст короткий текст и так далеее еще текст остальной текст продолжение рас рас рас (спрятать)
ну вот примерно как то так, с бб кодами проблем нет, это могу реализовать, если бы не. чтобы спрятать какой то элемент у него должен быть id. но ведь через бб коды не удобно ид назначать. да и не правильно это будет (имхо).
| Код |
| <style>span <script>dID=function(I) showA=function(s1,s2) </script> |
но через бб коды его никак по моему не реализовать. и тут приходится несколлько раз писать одно и тоже начало..
какие мысли есть? или может где то такое уже используется или еще что.
Это сообщение отредактировал(а) JEEN — 14.1.2009, 22:09
Профиль
Группа: Модератор
Сообщений: 6417
Регистрация: 2.8.2004
Где: spb
Репутация: 17
Всего: 137
Как раз на прошлой недели переписывал написанный мною года 2-3 назад подобный скрипт. Теперь уже переписал с использованием jQuery. Пример работы можешь посмотреть на моем сайте (там в новостях некоторых есть ссылка "читать подробнее")
Как реализовать.
Сперва подключаем библиотеку jQuery и выполняем необходимые действия, если DOM готов к ним:
| Код |
| <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $( function() < var LIMIT = 20; $( 'div.expand_news_content' ).each( function( i, elem ) < if ( $( this ).html().length > LIMIT ) < var short_news = $( '<div ); short_news.html( $( this ).text().substring( 0, LIMIT ) + ". \n<br />\n" ); var read_more = $( '<div>' ); read_more.attr( 'class', 'read_more' ); read_more.text( 'Читать полностью' ); read_more.bind( 'click', function() < short_news.toggle( 'slow' ); $( elem ).toggle( 'slow' ); > ); $( this ).hide(); short_news.appendTo( $( this ).parent() ); $( short_news ).prepend( read_more ); > else < return true; > > ); > ); </script> |
Для работы этого кода нам не понадобятся Id у новостей, это и есть пример гибкости jQuery. Ну а о том что код короткий, кроссбраузерный и быстрый говорить и вовсе не придется.
Далее, твой bb-код должен заменяться на такую конструкцию: