-
墨染盛夏2020-01-01 00:00
- 10
- 57
- 0
哪位大哥，可以帮忙把这个JS效果改为按高度而不是按字来展开，能帮忙小费酬谢！这段JS另外一个效果，就是点击这个文字区域也能展开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="appaaa">
<div id="appaaaaaaaaa">
<ul id="list">
<li>
<div class="desc">SOHO中国董事长潘石屹的5G寄语：5G将会造福全世界的人们，这是全人类的共同财富。有些狭隘的观点视这种进步为洪水猛兽，我们不要受这些干扰。埋头苦干，一份勤劳总会有一份收获。 </div>
</li>
<li>
<div class="desc">
<p class="contentText">陕北—湖北±800千伏特高压直流输电工程近期正式获得国家发改委核准，工程静态投资178.41亿元。 这也是国家发改委张青海一河南±800千伏特高压直流输电工程、张北—雄安1000千伏特高压交流输变电工程和驻马店一南阳1000千伏交流特高压输变电工程之后，核准的第四条特高压线路。</p>
<p class="contentText">近期还将核准雅中—江西特高压，建成川电外送第四条通道。工程规划建设1条±800千伏直流工程，输电能力800万千瓦，途经过四川、云南、贵州、湖南、江西，全长1700千米。</p>
<p class="contentText">2018年9月份，国家能源局印发《关于加快推进一批输变电重点工程规划建设工作的通知》（国能发电力〔2018〕70号），拟2018—2019两年审核12条特高压工程。本轮规划建设5条特高压直流输电线路以及7条特高压交流输电线路，项目建设期2-3年，合计输电能力57GW，带来约1800亿—2000元投资</p>
</div>
</li>
<li>
<div class="desc"><div class="343">瑞幸咖啡IPO发行价定在17美元/股，这意味着市值将达到42亿美元。同时，该公司还将其IPO增加至3300万股。增加至3300万股。SOHO中国董事长潘石屹的5G寄语：5G将会造福全世界的人们，这是全人类的共同财富。有些狭隘的观点视这种进步为洪水猛兽，我们不要受这些干扰。埋头苦干，一份勤劳总会有一份收获。</div> </div>
</li>
<li>
<div class="desc"><div class="343">瑞幸咖啡IPO发行价定在17美元/股，这意味着市值将达到42亿美元。同时，该公司还将其IPO增加至3300万股。增加至3300万股。</div></div>
</li>
</ul></div></div>
<script type="text/javascript">
$('#list').off('click').on('click', '.desc-switch,.desc' ,function(e){
console.log(this)
var idx = $(this).parents('li').index()
var btn = $(this).parents('li').find('.desc-switch')
var desc = $(this).parents('li').attr('data-desc')
if(btn.hasClass('desc-switch-close')){
btn.addClass('desc-switch-open').removeClass('desc-switch-close').html('收起');
btn.parents('li').find('.desc').html(desc)
}else if(btn.hasClass('desc-switch-open')){
btn.removeClass('desc-switch-open').addClass('desc-switch-close').html('展开');
btn.parents('li').find('.desc').html(desc.slice(0,69) + '……')
}
}).find('li').each(function(idx, v){
var item = $(v)
var str = item.find('.desc').html().trim();
item.attr('data-desc', str)
if(str.length > 69){
item.append('<div class="desc-switch desc-switch-close">展开</div>')
item.find('.desc').html(str.slice(0,69) + '……')
}
});
</script>
</body>
</html>1
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
._Angel妃°〞 普通会员 1楼
在JavaScript中，实现按高度收起和展开的效果通常涉及到监听点击事件，并通过修改元素的CSS高度属性来实现。以下是一个简单的示例：
```html
这是一段可以展开和收起的内容，按高度进行控制。```
在这个示例中，我们首先给内容区域设置了一个初始高度为0且具有过渡效果的CSS样式。然后，我们在按钮上添加了点击事件监听器，当点击按钮时，会检查内容区域的高度，如果高度为0，则将其高度设置为内容的实际高度（通过
scrollHeight获取），否则将高度设回0，从而实现了按高度收起和展开的效果。
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部