SlideToggle несколько кликов читать больше/меньше, показывать только одно, скрывать другие.

Как я могу изменить свой код, когда я много раз нажимаю на один конкретный read more, а функция slideToggle изменяет его каждый раз, когда читать больше/меньше и показывать/скрывать содержимое, другие остаются read more, но даже в этом случае, когда я нажимаю на другую ссылку с помощью read more, старая slideUp и новая используют функцию slideToggle для slideDown .

Мой HTML

<!-- === h1 === -->
    <h1>Lorem ipsum dolor sit amet</h1>
        <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
        <p class="more">Duis aute irure dolor in reprehenderit in voluptate.</p>
        <a class="read_more">... Read More</a>
    <!-- === h2 === -->             
    <h2>Consectetur adipisicing elit</h2>
        <p>On the other hand, we denounce with righteous.</p>
        <p class="more">Gemoralized by the charms of pleasure of the moment.</p>
        <a class="read_more">... Read More</a> 
    <!-- === h3 === -->                  
    <h3>Sed do eiusmod tempor incididunt</h3>
        <p>The wise man therefore always holds.</p>
        <p class="more">Et harum quidem rerum facilis est et expedita distinctio.</p>
        <a class="read_more">... Read More</a>

Мой Jquery

var rm = $(".read_more"),
    moreText = "... Read More",
    lessText = "... Read Less";

rm.click(function () {
  rm.text(moreText);

var $this = $(this);
var more = $this.text($this.text() == moreText ? lessText : moreText).prev(".more").slideToggle("normal");

$('.more').not(more).slideUp();
});

javascript jquery show-hide multiple-choice slidetoggle
person onlinepch    schedule 05.02.2014    source источник
comment
Думаю найти, просто в коде Jqery заменить rm.text(moreText); на rm.not($this).text(moreText); Спасибо !   -  person onlinepch    schedule 05.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Ваш код почти правильный. Просто внес это небольшое изменение в работу и добавил немного CSS.

    var rm = $(".read_more"),
    moreText = "... Read More",
    lessText = "... Read Less";

rm.click(function () {
    var $this = $(this);
    $this.prev().slideToggle();
    $this.text($this.text() == moreText ? lessText : moreText);
});

Добавьте следующий CSS.

p.more {
    display: none;
}

Проверьте следующую скрипту: http://jsfiddle.net/7ZyuP/2/.

person Shiva Avula    schedule 05.02.2014
comment
Спасибо @Script Shiva, у меня уже есть правило CSS. Я нахожу проблему, если у кого-то такая же проблема, см. Мой комментарий выше. - person onlinepch; 05.02.2014