Question

我的网站上有一个侧边栏菜单可以打开和关闭。

当侧边栏打开时，我在菜单按钮上添加了一个名为“active”的附加类，触发菜单。

当此菜单按钮元素具有“活动”类别时屏幕宽度> 768px，我想用类'container-fluid'设置元素的填充。

我目前使用coffeescript / javascript：

执行此操作

@setPaddingIfMenuOpen = () ->
  console.log 'set padding if menu open called from layout coffee'
  if $(window).width() > 768
    if $('.show-left').hasClass 'active' 
      padding = 280
      $('#main > .container-fluid').css 'padding-left', padding
    else 
      $('#main > .container-fluid').css 'padding-left', '25px'
  else 
    $('#main > .container-fluid').css 'padding-left', '25px'

但我想知道我是否可以用纯CSS实现同样的目标？

这是一个JSFiddle：

http://jsfiddle.net/685Vv/5/

单击打开菜单按钮并且#showLeft元素也有“活动”类，看看是否可以将“padding-left：100px”属性添加到具有“main”类的元素中。然后，如果属性#showLeft没有类'active'，则属性padding-left应更改为'padding-left：0px'

Answer 1

您可以使用 CSS Media Queries ，以防您能够将.active类（或任何其他类）应用于某个共享父元素 - body - 同样（如果你的标记必须保持原样，我猜你的运气不好）。

因此，如果扩展的侧边菜单也会产生body.side-menu-active，您可以这样做：

#main > .container-fluid{
  padding-left: 25px;
}
@media all and (min-width: 768px){
  .slide-menu-active #main > .container-fluid{
    padding-left: 280px;
  }
}

如何根据具有特定类的另一个元素设置一个元素的CSS？

1 个答案: