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

Question

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

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

当此菜单按钮元素的类为“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 也具有类“active”后，看看是否可以将属性“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;
  }
}