Question

我是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将身体背景颜色更改为白色，顶部带有“调光器div”。当侧边栏切换为关闭时，它不会保留背景颜色。

我已经尝试过对Semantic进行一些覆盖，但我无法保留背景颜色。语义在两个地方改变背景颜色。

理想情况下，我宁愿不“破解”语义，因为我正在直接从网站上复制此代码而我在Stack Overflow上找不到任何关于它的任何其他问题，我错过了什么？

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

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

Answer 1

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

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

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

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

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

1 个答案: