javascript - 如何使用 more/less 更改 slideToggle 函数的 div 高度

Question

如何更新我的代码，以便更改 <div>高度 slideToggle() ，现在它几乎是正确的，但是当我点击一个 "read_more"然后点击另一个是不对的。我需要什么时候 slideDown显示隐藏 p并更改主 <div>到特定高度，什么时候是slideUp隐藏这个 p并更改 <div>以前的特定高度("... Read More" 基础 .main 高度，"... Read Less" 新的 .main 高度)。

请参阅demo或下面的代码。

HTML

<div class="main">
    <!-- === 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>
</div>

CSS

.main {
    border:1px solid blue;
    height: 260px;
    padding: 5px;
}
h1,h2,h3 {
    font-size: 18px;
    color: #96bc33;
}
p {
    margin: 0;
    font-size: 13px;
}
.more {
    display:none;
}
.read_more {
    cursor: pointer;
    color: red;
}

JavaScript

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

rm.click(function () {
    var $this = $(this);
    rm.not($this).text(moreText).prev(".more").slideUp();
    $this.text($this.text() == moreText ? lessText : moreText).prev(".more").slideToggle("normal");
    $(".main").animate({height:(++i % 2) ? 280 : 260}, "normal");   
});

Answer 1

我已经升级了你的 jsFiddle:

http://jsfiddle.net/GwkQN/

所做的更改是:

• 从您的主容器中移除了height属性

• 为 rm.click 重构了您的脚本

我不确定您的代码除了 slideToggle 之外是否还做了其他事情，但是这个单行代码可能会做您需要的一切。

$(this).prev('.more').slideToggle();

更改了 jQuery 代码:

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

rm.click(function () {

    $(this).prev('.more').slideToggle();

    if($(this).text()==moreText){
        $(this).text(lessText);
    }else{
        $(this).text(moreText);
    }

});

更改的 CSS:

.main {
    border:1px solid blue;
    padding: 5px;
}