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

Question

我是 js 的新手，jquery 但我相信我正确地实现了边栏。为了在干净的环境中对其进行测试，我直接从此处的语义 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'。当侧边栏切换关闭时，它不会保留背景颜色。

我试过对语义进行一些覆盖，但我无法让它保留背景颜色。语义改变了两个地方的背景颜色。

理想情况下，我宁愿不 "hack" 语义化，因为我直接从站点复制这段代码，但我在 Stack Overflow 上找不到关于它的任何其他问题，我是不是遗漏了什么？

代码笔：http://codepen.io/nextuniverse/pen/JKYNXy

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

Answer 1

语义 UI 有一个 CSS 规则，内容为：

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

显示侧边栏时，pushable class 添加到 <body>，从而触发背景颜色更改为白色。

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

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

Semantic UI sidebar component does not retain background color on toggle

javascript

sidebar

semantic-ui