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

Question

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

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

当此菜单按钮元素具有“活动”类且屏幕宽度 > 768px 时，我想在具有“容器流体”类的元素上设置填充。

我目前使用的是 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;
  }
}