如何使用更多/更少更改 slideToggle 功能上的 div 高度

Question

如何更新我的代码，这样我就可以用slideToggle() 更改<div> 的高度，现在它几乎是正确的，但是当我单击一个"read_more" 并单击另一个时它不是正确的。我需要slideDown 何时显示隐藏p 并将主要<div> 更改为特定高度，slideUp 何时隐藏此p 并更改<div> 以前的特定高度（"... Read More" 基础@ 987654332@高度，"... 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/

所做的更改是：

• 从您的 main 容器中移除了 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;
}

Answer 2

如果你需要特定的高度，你可以使用 css 属性：min-height: 260px;

.main {
    border:1px solid blue;
    padding: 5px;
     min-height: 260px;
}

JS

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

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");
});

FIDDLE

Answer 3

试试这个，

jsfiddle.net/4MfLw/8/

我已经更新了你的代码

我已从“主”类的 CSS 中删除“高度”属性 此外，我还评论了您的动画代码，并且我已经编写了代码以向上滑动所有其他“更多”div（如果它们是打开的）