Question

如何编码这样的代码？ http://tinyurl.com/retractablesidebar

它是一个可伸缩的固定侧边栏。从谷歌搜索，我找到了类似的侧边栏（http://www.berriart.com/sidr/）然而，它完全关闭。

Answer 1

如果您想知道如何编写侧边栏代码，您可以主要使用CSS和一些小的javascript函数来完成。我已经组装了

您将拥有所需的所有CSS来实现您的目标。最重要的规则是那些：

.sidebar {
  float: left;
  width: 50px;
  background-color: #f2f2f2;
}
.sidebar.maximized {
  width: 190px;
}
.body {
  margin-left: 190px;
  min-height: 100%;
}
.body.minimized {
  margin-left: 50px;
}

javascript函数只添加和删除CSS类，可以这样做：

var onClick = function () {
  var sidebar = document.querySelector('.sidebar');
  var body = document.querySelector('.body');
  var classNames = document.querySelector('.sidebar').className;
  if(classNames.indexOf('maximized') > -1) {
    sidebar.className = 'sidebar';
    body.className = 'body minimized';
  } else {
    sidebar.className = 'sidebar maximized';
    body.className = 'body';
  }
  return false;
};

希望这会有所帮助

如何使用示例编写可伸缩固定侧边栏的代码

1 个答案: