CSS中的Jquery和@media

Question

嗨，这儿!

我有一个有角度的项目，在这里我使用HTML、CSS和Jquery。我有一个段落设置为"display: none"，我希望它只在用户单击“按钮”标签时才出现。问题是，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;
   }

}

Jquery：

$(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和and都可以使用自己的方法(如ng-if指令的$('#p').show() )处理显示元素。

Answer 2

您可以使用简单的方法来解决这个问题：

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

    p.hidden-class {
       display: none;
    }

    p.visible-class {
        display: block;
    }
}

并使用ngClass切换您的类。