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

Question

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

Nem*_* Le 1 javascript sidebar semantic-ui

我是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')
    });
});

Run Code Online (Sandbox Code Playgroud)

将侧栏切换为打开状态后，语义会将主体背景颜色更改为白色，并在顶部带有“ dimmer div”。将侧栏切换为关闭时，它不会保留背景色。

我试图破解一些语义上的替代，但是我无法使其保留背景色。语义在两个地方更改背景颜色。

理想情况下，我不想“破解”语义，因为我是直接从网站上复制此代码，而在Stack Overflow上找不到关于它的任何其他问题，我是否缺少某些东西？

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

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

Answer 1

Ari*_*ira 5

语义UI的CSS规则为：

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

Run Code Online (Sandbox Code Playgroud)

的pushable类添加到<body>时被示出的边栏中，从而触发的背景色变化到白色。

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

归档时间：	9 年，5 月前
查看次数：	1939 次
最近记录：	9 年，5 月前