阅读更多，阅读更少脚本 - 单击按钮时设置初始 div 高度和另一个高度

Question

大家早上好！

我有一个多读/少读脚本。用户单击阅读更多选项卡并显示更多文本。这是它的设置方式。有一个 DIV 包含所有内容，在这个 DIV 中还有另一个 DIV，它也包含附加内容。两个 DIVS 都没有固定的高度。我想为容器DIV设置一个初始高度，即内容框，例如：初始高度为200px，点击阅读更多内容时，制作内容框强> 400px。

这里是代码（html）：

<div class="contentBox">
<p>Initial Text goes here</p>

<a class="addlTextTrigger" href="#">Read More</a>

<div class="addlTextBox">
<p>Additional Text here.</p>
</div>
</div>

这里是 JQuery，请不要 JQuery 切换样式，但这只是用于设置用于触发阅读更多/阅读更少功能的选项卡/链接的样式。

这里是 JQuery：

$(document).ready(function() {
$('.addlTextBox').hide();
$('.addlTextBoxTrigger').toggle(function(){
$('.addlTextBox').fadeIn('fast');
$(this).text("Read Less");
},
function(){
$('.addlTextBox').hide('fast');
$(this).text("Read More");
});
});

$(document).ready(function() {
$('.addlTextBoxTrigger').click(function(){
$(this).toggleClass('readMoreClick');
});
});

Answer 1

Live Example

使用 css 类并打开/关闭它们

Javascript：

$(document).ready(function() {
    $('.addlTextBox').hide();
    $(".contentBox").addClass("readLess");
    $('.addlTextTrigger').toggle(function() {
        $('.addlTextBox').fadeIn('fast');
        $(".contentBox").removeClass("readLess");
            .addClass("readMore");
        $(this).text("Read Less");
    }, function() {
        $('.addlTextBox').hide('fast');
        $(".contentBox").addClass("readLess");
            .removeClass("readMore");
        $(this).text("Read More");
    });
});

CSS：

.readLess {
    height: 200px;
}

.readMore {
    height: 400px;
}