jquery里点击按钮改变HTML一部分内容，类似相应的内容也会改变

Posted 2023-03-18

上图是效果，首次进入页面点击标签选中，然后点击更多，就会显示所有的标签，再点击收起的时候，原来选中的标签样式就没有了

我的部分代码
$(".mark_list_r").click(function() $(this).addClass("mark_list_r_slect"); if(li_number >5)$(".mark_list_r").unbind('click'); $(".mark_tc_wrap").css('display':'block'); );
//点击下拉展示更多 var cur_status = "less"; var charNumbers=$(".mark_text").html().length;//总字数 //alert(orgtxt); var limit=3580;//显示字数 // alert(showHeigth); if(charNumbers > limit) var orgheight=$(".mark_text").height(); //原高度 var orgtxt = $(".mark_text").html();//原文本内容 var showtxt =orgtxt.substring(0,limit); var hidetxt=orgtxt.substring(limit,charNumbers); //alert(hidetxt); $(".mark_text").html(showtxt);//当前显示的文本 var showHeigth=$(".mark_text").height();//截取内容 $(".switch").click(function() if(cur_status == "less") //html(hidetxt).appendTo($(this).siblings(".mark_text")); $(this).siblings(".mark_text").append(hidetxt); //$(this).siblings(".mark_text").html(hidetxt).css('display':'block'); $(this).siblings(".mark_text").height(showHeigth).animate( height:orgheight, duration: "slow" ); $(this).removeClass("mark_down").addClass("mark_up"); cur_status = "more"; else $(this).siblings(".mark_text").height(orgheight).animate( height:showHeigth, duration: "fast" ); $(this).siblings(".mark_text").html(showtxt); $(this).removeClass("mark_up").addClass("mark_down"); cur_status = "less"; ); else $(".switch").hide();
<div class="mark_text"> <span class="mark_list_r">摩车</span> ......
</div> <div class="switch mark_down">展开</div> </div>

参考技术A 你的展开思路有问题，你那样就需要两个重复的内容，一个是收起的，一个是展开的
这样是不科学的，应该是外面的DIV设置固定高度，里面的DIV不设置高度，然后用JS控制外面的DIV高度，比如：
<div style="width:500px;height:200px/*auto*/;overflow:hidden;">
<div style="width:500px;height:auto;">
<a herf="">熄火</a><a herf="">油耗</a>
</div>
</div>追问

那我怎么判断对于同一个按钮，第一次点击展开，第二次点击收起呢，也就是这两个动作交替出现呢

本回答被提问者采纳 参考技术B 应该是外面的DIV设置固定高度，里面的DIV不设置高度，然后用JS控制外面的DIV高度，比如：
<div style="width:500px;height:200px/*auto*/;overflow:hidden;">
<div style="width:500px;height:auto;">
<a herf="">熄火</a><a herf="">油耗</a>
</div>
</div>