如何设置Div仅显示50px高度，点击后展开全部内容？

嘿，我帮你瞅了下代码，发现几个关键问题导致功能没生效，咱们一步步来改：

1. 语法小错误：你的JS代码末尾少了两个闭合括号（.click()和.ready()的结束括号），这会直接让JS跑不起来哦！
2. 选择器写错了：$("document")应该改成$(document)，document不需要加引号哒。
3. 方法用错啦：slideDown()和slideUp()是用来控制元素显示/隐藏的，不是控制高度展开收起的，咱们得用动画来修改高度才行。
4. 高度判断不靠谱：直接拿css("height")和50px比，有时候浏览器会返回50.0px这种带小数的值，判断就会出错，不如用个类来标记展开/收起状态，靠谱多了。

HTML部分 #

<div class="mydiv">
  这里放你的长内容哦，比如超多文字，超出50px高度的内容都能藏起来~
</div>
<button class="show-more">显示更多</button>

CSS部分 #

.mydiv {
  height: 50px;
  overflow: hidden;
  transition: height 0.3s ease; /* 加个过渡动画，展开收起更丝滑 */
}

.mydiv.expanded {
  height: auto;
}

JavaScript部分 #

$(document).ready(function(){
  $(".show-more").click(function(){
    const $myDiv = $(".mydiv");
    // 用类来判断当前状态，比判断高度靠谱
    if($myDiv.hasClass("expanded")){
      // 收起操作：先拿到内容实际高度，动画缩到50px，再移除类
      const realHeight = $myDiv[0].scrollHeight;
      $myDiv.height(realHeight).animate({height: "50px"}, 300, function(){
        $myDiv.removeClass("expanded").css("height", ""); // 让CSS重新接管高度
      });
      $(this).text("显示更多"); // 按钮文字跟着变
    } else {
      // 展开操作：拿到实际高度，动画拉到全高，再加类
      const realHeight = $myDiv[0].scrollHeight;
      $myDiv.animate({height: realHeight}, 300, function(){
        $myDiv.addClass("expanded").css("height", ""); // 让height:auto生效
      });
      $(this).text("收起"); // 按钮文字切换
    }
  });
});

• 用类标记状态：不管浏览器怎么返回高度值，只要看有没有expanded类就知道状态，绝对不会判断错。
• 平滑动画效果：用animate()来做高度过渡，加上scrollHeight拿到内容的真实高度，确保展开后能显示全部内容，不会露半截。
• 修复语法问题：把之前的选择器错误和括号缺失都补上了，JS能正常执行啦。
• 用户体验优化：按钮文字跟着状态切换，用户一眼就知道点了会干嘛～

这样改完之后，就能实现你要的效果：一开始只显示50px高度，点“显示更多”展开全部内容，再点就收回去啦！

内容的提问来源于stack exchange，提问作者Mike L