gpt4 book ai didi

javascript - 显示 "show more"按钮并隐藏第二行

转载 作者:太空宇宙 更新时间:2023-11-04 03:42:40 24 4
gpt4 key购买 nike

我完全迷失在这里。我正在尝试仅使用一行文本在我的网站上显示信息。如果需要显示更多信息,额外的信息将显示在第二行。但是我怎样才能隐藏第二行并显示一个按钮“显示更多”呢?

一旦用户点击显示更多按钮,第二行的额外信息/文本将只显示。谢谢...

下面是我的按钮的 javascript,我不知道如何编写 html 部分,第二行将自动隐藏并显示“显示更多”按钮。

var hide2 = 1;    
$('#showmorerates').click(function(){
if(hide2 == 1){
$('.morerates').toggle(300);
document.getElementById("showmorerates").innerHTML = '<a>Show Less</a>';
hide2 = 0;
} else {
$('.morerates').toggle(300);
document.getElementById("showmorerates").innerHTML = '<a>Show More</a>';
hide2 = 1;
}
});

最佳答案

只需使用一个 css 类来设置 div 的高度并将溢出设置为隐藏。每当单击 show more 按钮时,从文本容器中删除此类。

.less {
overflow: hidden;
height: 1em;
}

这是工作 fiddle :http://jsfiddle.net/2tg7v/

关于javascript - 显示 "show more"按钮并隐藏第二行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24648254/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com