【问题标题】：Jquery and @media in CSSCSS 中的 Jquery 和 @media
【发布时间】：2018-10-26 04:53:55
【问题描述】：

你好！

我有一个 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;
   }

}

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'});
    });

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

【问题讨论】：

Please read this first. 你不应该在 Angular 应用程序中使用 jQuery 操作 DOM。
回到主题，normal 不是display 的有效值。试试block。
您尝试执行的逻辑应该与按钮上的ng-click 相关，该按钮会更改角度应用程序中某个位置的状态，用于确定其他元素是否是显示与否，使用 ng-show 或 ng-hide
@Taplar，这将在 AngularJS 中。
好的，所以快速搜索看起来像是(click)="function"。 stackoverflow.com/questions/40211730/… 同样的概念也适用。这个逻辑应该用角度绑定而不是 jQuery 来完成

标签： jquery html css

【解决方案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 都可以使用它们自己的方法（例如 ng-if 指令的 $('#p').show()）来处理显示元素。

【讨论】：

【解决方案2】：

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

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

    p.hidden-class {
       display: none;
    }

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

然后用 ngClass 切换你的类。

【讨论】：