如何使HTML5 UP Editorial模板的侧边栏默认处于折叠状态

嘿，我来帮你搞定这个侧边栏默认折叠的问题！首先得搞清楚这个模板的侧边栏逻辑——它是通过给#sidebar元素添加/移除inactive类来控制折叠和展开的，点击蓝色三杠按钮本质就是触发这个类的切换。你之前尝试点击#sidebar元素没用，是因为实际触发折叠逻辑的是JS动态生成的.toggle按钮，而不是sidebar本身哦。

下面给你几个简单有效的解决方法：

方法一：直接在HTML里添加折叠类（最省事） #

直接修改index.html里的#sidebar标签，给它加上inactive类，页面一加载就会默认折叠：

<div id="sidebar" class="inactive">
  <div class="inner">
    <!-- 侧边栏原有内容 -->
  </div>
</div>

这个方法不需要改动任何JS代码，完全靠CSS类控制，直接又高效。

方法二：在JS初始化时添加折叠类 #

如果你更倾向用JS控制，可以在页面加载完成后给#sidebar加上inactive类。把这段代码放在main.js之后的脚本块里：

<script>
$(document).ready(function() {
  // 给侧边栏添加折叠类
  $('#sidebar').addClass('inactive');
});
</script>

或者直接修改main.js，在toggle按钮绑定事件后添加这行代码：

(function($) {
  var $window = $(window), $head = $('head'), $body = $('body');
  var $sidebar = $('#sidebar'), $sidebar_inner = $sidebar.children('.inner');

  $('<a href="#sidebar" class="toggle">Toggle</a>')
    .appendTo($sidebar)
    .on('click', function(event) {
      event.preventDefault();
      event.stopPropagation();
      $sidebar.toggleClass('inactive');
    });

  // 新增：默认折叠侧边栏
  $sidebar.addClass('inactive');
})(jQuery);

方法三：模拟点击toggle按钮（不推荐，但可尝试） #

如果你想模拟用户点击按钮的行为，得确保toggle按钮已经被main.js创建出来。所以要把脚本放在main.js之后，并且等DOM就绪：

<script>
$(document).ready(function() {
  // 点击toggle按钮触发折叠
  $('#sidebar .toggle').click();
});
</script>

不过这个方法不如前两种直接，多了一次事件触发的过程，优先推荐前两种方案。

原理其实很简单：模板的CSS已经定义了#sidebar.inactive的折叠样式（margin-left: -13em），只要页面加载时这个类存在，侧边栏就会处于折叠状态啦。

内容来源于stack exchange