CSS 中的 Jquery 和 @media

Question

你好!

我有一个 Angular 元素，我在其中使用 HTML、CSS 和 Jquery。 我有一段设置为“显示:无”，我希望它仅在用户单击“按钮”标签时出现。问题是，CSS 位于@media 注释中。而且我不能将它放在段落标记内，如“style=@media all and...”，因为 HTML 文件不使用注释进行编译。它必须在特定的 CSS 文档中。因此，我无法使用 Jquery 覆盖段落标记的显示。

事情是这样的:

HTML:

<p id="two">
    The history of ...</p>

CSS:

@media all and (max-width: 580px) {

   p#two
   {
       display: none;
   }

}

J查询:

$(document).ready(function(){
    $("p#one button").click(function(){
      $("p#two").attr("style", "display: normal")
    });
});

我也试过像这样的 Jquery:

    $("p#one button").click(function(){
      $("p#two").css({"display" : "normal"});
    });

或

$("p#one button").click(function(){
      $("p#two").css({
        display : 'normal'});
    });

但似乎没有什么可以覆盖“显示:无”。 我该怎么做才能解决这个问题？

Answer 1

就我个人而言，我不喜欢将 css 属性与 javascript 混合使用，除非确实有必要。

您可以为 p#two 添加一个类覆盖 display: none属性并切换该类 on点击。

@media all and (max-width: 580px) {
   p#two { display: none; }
   p#two.show { display: initial; } // "normal" is not a valid value for display
}

然后，在您的点击事件处理程序中，添加类:

document.getElementById('two').classList.add('show')

请注意 normal不是 display 的有效选项而且 jquery 和 angular 都可以使用自己的方法处理显示元素，例如 $('#p').show()的 ng-if指令。