如何在 jquery 中使用 show 函数？ [复制]答案

【问题标题】：how to use the show function in jquery? [duplicate]如何在 jquery 中使用 show 函数？ [复制]
【发布时间】：2015-09-18 18:21:13
【问题描述】：

我是 Jquery 的新手，并通过 w3 学习了一些教程。

我无法弄清楚为什么我的代码不能用于与隐藏相反的“显示”功能。这是代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).show();
    });
});
</script>

</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

<style>

p { 
    visibility: hidden;
}

</style>



</body>
</html>

这似乎很明显，但是当页面加载时，所有<p> 元素由于样式而不可见，但我认为点击它们应该显示？他们没有。风格是否过于强势？如果是这样，你如何阻止这种情况？或者我在其他地方犯了一个简单的错误。

谢谢

【问题讨论】：

用户如何点击不可见的p 元素？
在此处查看有关如何显示的另一个 w3 演示：w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

标签： javascript jquery html

【解决方案1】：

你有两个问题。

第一，来自the documentation：

匹配的元素将立即显示，没有动画。这大致相当于调用 .css("display", "block"), 除了显示属性恢复到原来的样子最初。如果一个元素的显示值为 inline，则隐藏并显示，它将再次内联显示。

您调用的函数将修改元素的display，但不会修改visibility（您已将其设置为隐藏）。

要修改可见性，您需要明确地这样做。

$(this).css('visibility', 'visible');

第二，即使一个不可见的元素会占用页面空间，你也不能点击不可见的东西。它只是不会触发点击事件。

您可以通过将每个段落包装在另一个元素中并在其上放置事件侦听器来解决此问题。

 $("div").click(function() {
   $(this).find('p').css('visibility', 'visible');
 });

p {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>If you click on me, I will disappear.</p>
</div>
<div>
  <p>Click me away!</p>
</div>
<div>
  <p>Click me too!</p>
</div>

【讨论】：

【解决方案2】：

$(this).show() 不会更改可见性 css 属性。试试看：$(this).css("visibility", "visible");

【讨论】：

投了反对票，因为即使您的解决方案是正确的，也无法解决他的问题。您没有指出p 无法点击，因为点击它是不可见的。

【解决方案3】：

如何点击 p 元素？

我认为您应该制作一个按钮元素，然后在单击该元素时尝试显示 p 元素。我认为这会有所帮助:)

【讨论】：

这不是答案，而是评论。
嘿斯蒂芬，你现在能检查我的答案吗？这对你有用吗？

【解决方案4】：

只需使用以下代码即可正常工作。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
$("button").click(function(){
    $("p").css("visibility", "visible");
});
});
</script>

</head>
<body>

<button>click on me.</button>
<p>Click me away!</p>
<p>Click me too!</p>

<style>

p { 
visibility: hidden;
 }

</style>



</body>
</html>

【讨论】：

嘿肥胖，希望它对你有用。祝你有美好的一天