SlideToggle 多次点击阅读更多/更少，只显示一个，隐藏其他。

Question

如何更改我的代码，当我多次点击一个特定的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();
});

Answer 1

您的代码几乎是正确的。只是对功能进行了这个小改动并添加了一些 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/