如何使用 javascript 和 css 显示扩展文本
How to showing expanding text with javascript and css
如果我点击 "more" 我需要展开我的文本,如果我点击另一个 "more"class 我想展开它以便我的文本从所有其他的缩回.所以基本上只有一个 "more"class 被扩展了。如果文本 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").slideDown(500);
$(this).text('LESS');
}
});
});
将你的脚本改成这样。
$(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');
}
});
});
这是一个 fiddle 文本显示和隐藏:
https://jsfiddle.net/mupfu53p/1/
$(document).ready(function() {
$('.content').each(function() {
var thisText = $(this).text();
var shortText = thisText.substring(0, thisText.indexOf(" ", 50)) + '...';
$(this).data('longText', thisText);
$(this).data('shortText', shortText);
$(this).text($(this).data('shortText'));
});
$('.more').click(function(e) {
e.preventDefault();
var thisSib = $(this).prev('.content');
var currentText = $(thisSib).text();
if (currentText === $(thisSib).data('shortText')) {
$(thisSib).text($(thisSib).data('longText'));
} else {
$(thisSib).text($(thisSib).data('shortText'));
}
});
});
不确定这是否是您想要的,但也许其他答案更接近。
请在下面找到代码。我认为它会解决你的问题。
仅供参考,html 图片标签将像这样
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(".more").html('LESS');
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
$(".more").html('MORE');
} else {
$(this).next(".text").slideToggle(500);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
TEST1
TEST@
TEST3
TEST4
TEST5
TEST6
TEST7
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
TEST1
TEST@
TEST3
TEST4
TEST5
TEST6
TEST7
</div>
</div>
</div>
</div>
这应该有效。
$(document).ready(function() {
$(".expand").click(function() {
var txt = $(this).find('.more').text();
$('.more').text('MORE');
$(".text").slideUp(500);
$(this).next('.text').slideToggle(500);
$(this).find('.more').text('LESS');
});
});
.expand {
cursor: pointer;
}
.text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="http://placehold.it/150" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe optio aperiam, accusamus assumenda! Quidem accusantium, officia, esse ipsam magni nostrum asperiores cum quod itaque, est obcaecati perspiciatis amet alias quia?
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="http://placehold.it/150" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis animi eum mollitia provident aut cum eos expedita commodi, sunt, quam, odio error. Tempore quasi, tenetur blanditiis debitis deleniti nobis deserunt!
</div>
</div>
</div>
</div>
如果我点击 "more" 我需要展开我的文本,如果我点击另一个 "more"class 我想展开它以便我的文本从所有其他的缩回.所以基本上只有一个 "more"class 被扩展了。如果文本 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").slideDown(500);
$(this).text('LESS');
}
});
});
将你的脚本改成这样。
$(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');
}
});
});
这是一个 fiddle 文本显示和隐藏:
https://jsfiddle.net/mupfu53p/1/
$(document).ready(function() {
$('.content').each(function() {
var thisText = $(this).text();
var shortText = thisText.substring(0, thisText.indexOf(" ", 50)) + '...';
$(this).data('longText', thisText);
$(this).data('shortText', shortText);
$(this).text($(this).data('shortText'));
});
$('.more').click(function(e) {
e.preventDefault();
var thisSib = $(this).prev('.content');
var currentText = $(thisSib).text();
if (currentText === $(thisSib).data('shortText')) {
$(thisSib).text($(thisSib).data('longText'));
} else {
$(thisSib).text($(thisSib).data('shortText'));
}
});
});
不确定这是否是您想要的,但也许其他答案更接近。
请在下面找到代码。我认为它会解决你的问题。 仅供参考,html 图片标签将像这样
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(".more").html('LESS');
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
$(".more").html('MORE');
} else {
$(this).next(".text").slideToggle(500);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
TEST1
TEST@
TEST3
TEST4
TEST5
TEST6
TEST7
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
TEST1
TEST@
TEST3
TEST4
TEST5
TEST6
TEST7
</div>
</div>
</div>
</div>
这应该有效。
$(document).ready(function() {
$(".expand").click(function() {
var txt = $(this).find('.more').text();
$('.more').text('MORE');
$(".text").slideUp(500);
$(this).next('.text').slideToggle(500);
$(this).find('.more').text('LESS');
});
});
.expand {
cursor: pointer;
}
.text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="http://placehold.it/150" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe optio aperiam, accusamus assumenda! Quidem accusantium, officia, esse ipsam magni nostrum asperiores cum quod itaque, est obcaecati perspiciatis amet alias quia?
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="http://placehold.it/150" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis animi eum mollitia provident aut cum eos expedita commodi, sunt, quam, odio error. Tempore quasi, tenetur blanditiis debitis deleniti nobis deserunt!
</div>
</div>
</div>
</div>