jQuery切换Div：如何在页面加载时保持Div处于展开状态

嘿，这个需求很容易搞定，咱们只需要去掉原代码里那些让内容初始隐藏的逻辑就行，具体改动如下：

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"><div class="expander">Click Here</div></a>
<p class="text">Hidden Text</p>

<script>
$(document).ready(function () {
  $('.expander').click(function () {
    // .parent() selects the A tag, .next() selects the P tag
    $(this).parent().next().slideToggle(200);
  });
  // 移除了初始化时隐藏内容的代码，让内容默认展开
});
</script>

关键改动说明 #

原代码里有两处强制内容初始隐藏的逻辑，咱们直接移除它们就好：

• 删掉$('.text').hide();：这行代码会在页面加载完成后立刻隐藏所有.text元素，去掉它就能让内容默认显示。
• 删掉$('.text').slideUp(200);：这行是以动画方式收起内容，同样会让初始状态变成隐藏，移除后就不会触发这个收起动作了。

调整之后，页面加载时.text元素会保持默认的展开状态，点击Click Here依然能正常切换内容的显示和隐藏，完全不影响原有交互功能~

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