如何设置HTML导航栏默认处于展开状态？新手技术求助

看起来你用的是Bootstrap的折叠导航组件，默认折叠的问题很好解决，我帮你梳理两个简单的方案：

方案一：直接修改HTML类（最推荐） #

Bootstrap的折叠面板是通过CSS类来控制显示状态的：

• 如果你用的是Bootstrap 3：把导航栏里的 <div class="navbar-collapse collapse"> 改成 <div class="navbar-collapse collapse in"> —— 加个in类就能让它默认展开。
• 如果你用的是Bootstrap 4或5：把上面的代码改成 <div class="navbar-collapse collapse show"> —— 这两个版本用show代替了旧版的in。

修改后的代码片段示例（以Bootstrap 3为例）：

<div class="navbar-collapse collapse in">
  <ul class="nav navbar-nav">
    <li class="menuItem active"><a href="#wrapper">Home</a></li>
    <li class="menuItem"><a href="#aboutus">About Me</a></li>
    <li class="menuItem"><a href="resume.html" target = "_blank" >CV</a></li>
    <li class="menuItem"><a href="#" target = "_blank" >Photography</a></li>
    <!-- 其他菜单选项 -->
  </ul>
</div>

方案二：用JavaScript控制 #

如果不想改HTML结构，也可以在页面加载完成后手动触发展开：

// 确保jQuery已经加载（Bootstrap依赖jQuery）
$(document).ready(function() {
  $('.navbar-collapse').collapse('show');
});

原理很简单：Bootstrap的collapse组件默认隐藏是因为collapse类自带隐藏样式，加上in/show类就会覆盖这个样式，让内容默认显示。你之前改JS没成功可能是没找对触发的时机或者选择器，试试上面的方法应该就能解决啦～

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