如果我单击“更多”,我需要使我的文本展开,如果我单击另一个“更多”类,我想让它从所有其他类中撤回。所以基本上只有一个“更多”类被扩展。我还想在文本 div 打开时将文本从更多更改为更少。
这是我的 html 代码
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="images/horses/siente.png" alt="sientje"></img>
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="images/horses/siente.png" alt="sientje"></img>
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
</div>
</div>
</div>
</div>
这是我的脚本
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(this).next(".text").slideToggle(500);
$(this).text($(this).text() == 'LESS' ? 'MORE' : 'LESS').toggleClass('up');
});
$(".expand").click(function() {
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideToggle(500);
}
});
});
希望你能帮助我
最佳答案
将您的脚本更改为这样。
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(".text").slideUp(500);
$(".expand").text('MORE');
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideToggle(500);
$(this).text('LESS');
}
});
});
关于javascript - 如何使用 javascript 和 css 显示扩展文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34219351/