语义 UI 侧边栏组件在切换时不保留背景颜色答案

【问题标题】：Semantic UI sidebar component does not retain background color on toggle语义 UI 侧边栏组件在切换时不保留背景颜色
【发布时间】：2016-06-11 12:06:45
【问题描述】：

我是 js 和 jquery 的新手，但我相信我正确地实现了侧边栏。为了在干净的环境中测试它，我直接从 Semantic UI 文档页面复制并粘贴了示例代码：

http://semantic-ui.com/modules/sidebar.html

<body>
  <div class="ui sidebar inverted vertical menu">
    <a class="item">1</a>
    <a class="item">2</a>
    <a class="item">3</a>
  </div>
  <div class="pusher">
    <button class="ui button">Click me</button>
  </div>
</body>


$(function(){
    $("button").click(function(){
        $(".ui.sidebar").sidebar('toggle')
    });
});

当侧边栏切换为打开时，Semantic 会将正文背景颜色更改为白色，并在顶部显示“dimmer div”。当侧边栏切换关闭时，它不会保留背景颜色。

我尝试在 Semantic 上添加一些覆盖，但我无法让它保留背景颜色。语义在两个地方改变背景颜色。

理想情况下，我宁愿不“破解”语义，因为我直接从站点复制此代码，并且在 Stack Overflow 上找不到任何其他问题，我是否遗漏了什么？

Codepen：http://codepen.io/nextuniverse/pen/JKYNXy

更新：感谢 Ariel 的回复，我已更新 Codepen 以反映正确的标记和样式。

【问题讨论】：

标签： javascript sidebar semantic-ui

【解决方案1】：

语义 UI 有一条 CSS 规则，内容如下：

body.pushable>.pusher {
  background: #fff;
}

当显示侧边栏时，pushable 类被添加到<body>，从而触发背景颜色变为白色。

因此，要设置 <body> 的背景，您必须在 CSS/SASS 中使用 body.pushable > .pusher 选择器，而不仅仅是 body。您可以在您提供的 CodePen 链接中尝试。

【讨论】：