求助：将jQuery查看更多/收起功能转换为Vanilla JS失败

我已经用jQuery实现了「查看更多/收起」功能，但转成原生JS后无法达到同样效果。下面是可用的jQuery代码，以及我写的无效原生JS代码，求帮忙解决转换问题。

可用的jQuery代码 #

<div class="short-desc">I am a short description preview</div>
<div class="full-desc" style="display:none">I am a full version preview</div>

<a href='#' class='read-more'>View More</a>

<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<script>
jQuery( function( $ ) {
    $(document).ready(function() {
        $( ".read-more" ).on( "click", function(e) {
            e.preventDefault();
            if ($(".short-desc").is(':visible')){
              $(".short-desc").hide();
              $(".full-desc").show();
              $(this).text("View less");
            }
            else{
              $(".short-desc").show();
              $(".full-desc").hide();
              $(this).text("View more");              
            }
            
        });
    });
});     
</script>

我编写的无效原生JS代码 #

<div id="short-desc">I am short description</div>
<div id="full-desc" style="display:none">I am full description</div>

<a href='#' onclick="myFunction()">View More</a>

<script type="text/javascript">
function myFunction() {
  var x = document.getElementById("full-desc");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

const paragraph = document 
                .getElementById('short-desc'); 
            const currentVisibility = window 
                .getComputedStyle(paragraph).visibility; 
  
            if (currentVisibility === 'hidden') { 
                paragraph.style.visibility = 'visible'; 
            } else { 
                paragraph.style.visibility = 'hidden'; 
            }
</script>

问题分析 #

你的原生JS代码存在几个关键问题：

1. 控制short-desc可见性的代码不在点击函数内，页面加载时就会自动执行一次，直接改变元素状态，不是点击触发的交互。
2. 使用visibility属性切换可见性，而jQuery的hide()/show()是操作display属性——两者差异很大：visibility:hidden的元素仍会占据页面空间，display:none则会完全隐藏且不占空间，和原功能逻辑不符。
3. 没有处理按钮文本的切换（「View More」和「View less」的转换）。
4. 未阻止a标签的默认跳转行为，点击后页面会自动回到顶部。

修复后的原生JS代码 #

<div id="short-desc">I am short description</div>
<div id="full-desc" style="display:none">I am full description</div>

<a href='#' id="read-more">View More</a>

<script>
// 等待DOM加载完成后执行，对应jQuery的$(document).ready()
document.addEventListener('DOMContentLoaded', function() {
  const shortDesc = document.getElementById('short-desc');
  const fullDesc = document.getElementById('full-desc');
  const readMoreBtn = document.getElementById('read-more');

  // 绑定点击事件
  readMoreBtn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为

    // 判断短描述是否可见
    const isShortVisible = shortDesc.style.display !== 'none';
    if (isShortVisible) {
      // 切换到完整描述
      shortDesc.style.display = 'none';
      fullDesc.style.display = 'block';
      readMoreBtn.textContent = 'View less';
    } else {
      // 切换回短描述
      shortDesc.style.display = 'block';
      fullDesc.style.display = 'none';
      readMoreBtn.textContent = 'View More';
    }
  });
});
</script>

代码说明 #

• 用DOMContentLoaded确保DOM完全加载后再绑定事件，避免找不到元素的问题。
• 所有交互逻辑都放在点击事件处理函数内，只有点击按钮才会触发状态切换。
• 统一使用display属性控制元素可见性，和原jQuery代码的行为完全一致。
• 同步切换按钮文本，完成完整的交互流程。
• 调用e.preventDefault()阻止a标签的默认跳转，避免页面滚动。

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