CSS中的Jquery和@media 你好！

我有一个Angular项目，我正在处理HTML、CSS和Jquery。 我有一个段落设置为“display:none”，我希望它只在用户单击“button”标记时出现。问题是，CSS在@media注释中。我不能把它放在像“style=@media all And…”这样的段落标记中，因为HTML文件没有使用注释编译。它必须在特定的CSS文档中。因此，我无法使用Jquery覆盖段落标记的显示

事情是这样的：

HTML:

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

或

但似乎没有什么可以覆盖“显示：无”。

---

我能做些什么来解决这个问题呢？

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

您可以为

p#two

添加一个类，该类覆盖

display:none

属性，并在上单击切换该类

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

然后，在click事件处理程序上，添加类：

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

---

请注意，

normal

不是

display

的有效选项，而且jquery和angular都可以使用自己的方法处理显示元素，如

$（'#p'）。show（）

指令的

ng if

。

，我不喜欢将css属性与javascript混合在一起，除非真的有必要

您可以为

p#two

添加一个类，该类覆盖

display:none

属性，并在上单击切换该类

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

然后，在click事件处理程序上，添加类：

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

---

请注意，

normal

不是

display

的有效选项，而且jquery和angular都可以使用自己的方法处理显示元素，如

$（'#p'）。show（）

指令的

ng if

可以使用简单的方法解决此问题：

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

    p.hidden-class {
       display: none;
    }

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

---

并使用ngClass切换您的类。

您可以使用简单的方法解决此问题：

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

    p.hidden-class {
       display: none;
    }

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

---

并使用ngClass切换类。

您不应该在Angular应用程序中使用jQuery操作DOM。回到主题，

normal

不是

显示的有效值。尝试
block
。您尝试执行的逻辑应该与按钮上的
ng单击相关，该按钮可在AngularJS中的某个位置更改状态，用于确定是否显示其他元素，无论是使用
ng show
还是
ng hide
@Taplar，都将使用AngularJS。确定，所以快速搜索看起来像是
（单击）=“函数”
。但同样的概念也适用。此逻辑应使用angular绑定而不是jQuery完成。您不应在angular应用程序中使用jQuery操作DOM。回到主题，
normal
不是
display
的有效值。尝试
block
。您尝试执行的逻辑应该与按钮上的
ng单击相关，该按钮可在AngularJS中的某个位置更改状态，用于确定是否显示其他元素，无论是使用
ng show
还是
ng hide
@Taplar，都将使用AngularJS。确定，所以快速搜索看起来像是
（单击）=“函数”
。但同样的概念也适用。这个逻辑应该使用角度绑定而不是jQuery来完成