点击后隐藏“显示更多”按钮的实现技术问询

嘿，我看了你的代码和需求，咱们来搞定这个问题～

方案一：隐藏原按钮，配合「Show less」按钮还原 #

你的现有代码已经实现了内容的显示/收起，但缺少点击后隐藏.btn-down的逻辑。我们只需要在点击事件里补上隐藏自身的操作，同时在点击「Show less」时把原按钮还原出来就行：

$(function() {
  // 初始化：隐藏内容，添加「Show less」按钮
  $(".btn-down").next().hide().append('<a href="javascript:void();" class="btn-up">Show less</a>');

  $(".btn-down").click(function() {
    $(this).next().slideDown(); // 展开目标内容
    $(this).hide(); // 隐藏当前的「Show more」按钮
  });

  $(".btn-up").click(function() {
    $(this).parent().slideUp(); // 收起内容
    $(".btn-down").show(); // 重新显示「Show more」按钮
  });
});

核心改动就是在.btn-down的点击事件里加上$(this).hide()，同时在.btn-up的点击事件中把原按钮恢复显示，这样整个交互逻辑就完整了。

方案二：单按钮切换文本（更简洁的思路） #

如果不想维护两个按钮，直接修改同一个按钮的文本和状态会更清爽，还能减少DOM元素：

$(function() {
  // 初始化：先隐藏内容
  $(".btn-toggle").next().hide();

  $(".btn-toggle").click(function() {
    var $targetContent = $(this).next();
    $targetContent.slideToggle();
    
    // 根据内容的显示状态切换按钮文本
    if ($targetContent.is(":visible")) {
      $(this).text("Show less");
    } else {
      $(this).text("Show more");
    }
  });
});

对应的HTML只需要一个按钮即可：

<button class="btn-toggle">Show more</button>
<div class="hidden-content">
  这里是要展开/收起的更多内容...
</div>

这种方式不用额外添加btn-up元素，逻辑更集中，用户交互也更连贯。

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