0

#aside-expander当浏览器宽度小于 1200 像素时，我正在使用以下 CSS 来隐藏我的标签并显示一个标签，以便用户在需要时查看它。

@media screen and (max-width: 1200px) {
    aside#global-widget-base {
        display: none !important;
    }
    #aside-expander {
        display: inline !important;
    }
}

当在元素上使用单击处理程序#aside-expander以再次显示时，不会显示该元素。我认为这是由于在样式元素上使用了 !important。

$('#aside-expander').click(function() {
   $("#global-widget-base").css("display", "inline"); 
});

我想知道是否有人能够提供关于如何按需显示此元素的解决方案？我已经尝试将 !important 应用于我的 jQuery .css 函数，但无济于事。

4

1 回答 1

1

正如 AurelioDeRosa 所说，如果你真的需要!important，你可能应该考虑一种不同的方式来实现你所拥有的——重要的应该只保留作为最后的手段，主要是因为重写它是如此痛苦。

但是，如果必须，解决此问题的一种方法是将类用作 javascript 的开关，以打开或关闭状态 - 例如：

@media screen and (max-width: 1200px) {
  aside#global-widget-base {
    display: none !important;
  }
  #aside-expander {
    display: inline !important;
  }
  aside#global-widget-base.hide-disabled {
    display: block !important;
  }
}

然后在您的 JavaScript 中，您只需要添加或删除hide-disabled该类。显然，这可以根据您的喜好进行定制，并取决于情况的要求。我通常更喜欢从 html 元素向上工作，所以我的 JavaScript 会切换页面的“模式”，但这应该只用于与整个页面相关的效果，而不是特定的东西。

var states = 'full-collapse half-collapse no-collapse';

// remove all collapsing
$('html').removeClass(states).addClass('no-collapse');

// add collapse back
$('html').removeClass(states).addClass('full-collapse');
于 2013-07-01T11:06:53.267 回答