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开关样式，但这只是用于设置用于触发read more / read less函数的tab / links的样式。

这是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;
}

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

1 个答案: