jQuery隐藏/显示答案

【问题标题】：jQuery hide / showjQuery隐藏/显示
【发布时间】：2011-06-12 07:52:02
【问题描述】：

我昨晚发现了 jQuery，它看起来很不错！我使用它来显示/隐藏 div ID，单击作为触发器显示最初隐藏在页面上的 div ID。这很好用，我为此感到自豪:-)

但是，我有一个问题：单击触发器后，我希望将其隐藏。所以我尝试添加一行来隐藏触发器onclick，但这不仅不起作用，现在加载页面时会显示最初隐藏的div。

这是我最初尝试过的：

$(document).ready(function () {  
$(‘#showhidetarget’).hide();

$(‘a#showhidetrigger’).click(function () {  
$(‘#showhidetarget’).show(200);  
**$(‘a#showhidetrigger’).hide();**  
});  
});

现在有人建议我可能无法隐藏触发器，因为它是一个内联元素（我对此一无所知）。他建议将触发器放在另一个 div ID 本身中，这是有道理的。因此，在定义另一个 ID 为“hideafterclick”且包含触发器的 div 之后，代码如下所示：

$(document).ready(function () {  
$(‘#showhidetarget’).hide();  

$(‘a#showhidetrigger’).click(function () {  
$(‘#showhidetarget’).show(200);  
**$(‘#hideafterclick’).hide();**

但同样令人遗憾的结果是：初始部分（触发器）没有隐藏，并且应该隐藏的 div 立即可见onload，而它应该被隐藏。当我删除包含 .hide 的粗体行时，该过程完美运行。

关于我做错了什么有什么建议吗？或者如何解决这个问题？只是为了完整：两个“部分”（div）都包含代码和超链接。实际上，单击第一部分（触发器）会启动一个新窗口并显示第二部分，这很好用。只是第一部分（触发器）必须随后变得不可见......

谁能帮我解决这个问题？

我应该使用除 div 之外的其他东西吗？

提前感谢您的智慧和帮助，

托马斯（比利时）

亲爱的 Shikiryu，亲爱的 DavidYell，

非常感谢您的 jsFiddles：我不知道 jsFiddle，但它很棒，如此完整，如此清晰而又如此简单！
有时候，幸福可以在一个看似不重要的小细节中找到。因为最后，我所做的只是做了一个小小的修改......
我最初写在包含 href 的触发器部分是这样的：

<a id="showhidetrigger" href="HYPERLINK"> blabla</a>

根据你的例子，我最终改变了a标签的id的位置，所以变成了：

<a href="HYPERLINK" id="showhidetrigger">blabla</a>

不要问我为什么，我仍然不知道到底有什么区别，但现在它就像一个魅力，这才是最重要的！当然，在我的情况下，HYPERLINK 部分很长，它属于带有大量标签和查询的 CFOutput，它包含另一个用于在弹出窗口中打开链接的 javascript，等等……所以也许这就是它一开始出错的地方地方。

我很高兴，感谢您的帮助！

感谢你，

托马斯

大家好，非常感谢您到目前为止的回答！关于撇号：我已经使用了通用的 'ones'，似乎当从邮件窗口复制粘贴它时，它们发生了变化，但它们在代码本身中没问题，所以问题不存在。关于 ** 星号：我只是将它们放在那里以指向出错的部分。抱歉，如果这引起了混乱，我已经理解 ** 会使该行变为粗体，这是我的错误。但无论如何，代码本身没有星号。只是只要我不添加最后一行，它就可以完美运行：onclick 触发器的href 打开（在新窗口中，使用 javascript）并且（最初隐藏的）目标 div 变得可见.但是一旦我尝试隐藏 a 触发器，目标 div 在加载时可见，并且 a 触发器没有隐藏onclick。因此，我在包含触发器的代码周围放置了另一个 div id，但结果相同。

亲爱的 Davidyell，感谢您的建议。我会尝试看看它是否有效，我会告诉你。我正在处理的页面非常复杂，在 ColdFusion 中（我不知道 ColdFusion），触发器、带有 javascript 弹出窗口的 href 等都在 CFoutput 中。我希望我能看到“森林里的树”（免费翻译自佛兰芒谚语:-)

我会及时通知你的！

亲切的问候，

托马斯（比利时）

【问题讨论】：

附带说明；不要使用‘，使用' 或"。
我会补充一点，** 不会被理解。评论是 // 或 /* */（如果他们是 cmets...）
啊！ SO 不是论坛；请不要添加仅作为更新或回复的“答案”。如果您需要与回答者互动，您可以对答案发表评论，如果您需要添加详细信息，您可以编辑您的问题。此外，您还创建了两个帐户（我已将它们合并）。考虑注册，这样您就不会创建另一个。谢谢。

标签： jquery hide show

【解决方案1】：

我会做类似的事情，http://jsfiddle.net/nxPEr/1/

希望对您有所帮助 :) 祝您使用 jQuery 好运！太棒了:)

【讨论】：

【解决方案2】：

如果您遇到此类问题，请使用 Firebug 和 Firefox，并且如果您有任何 Javascript 错误，它通常会为您指明正确的方向。尝试这样做以查看它显示的错误。

您还使用‘ 而不是' 或"，这可能会影响网页的解析。

奇怪的是，最后一行以** 开头和结尾。这可能会导致错误。

【讨论】：

【解决方案3】：

首先，忘记某人告诉你的话。您可以隐藏内联和块组件。

那么，你不应该使用那些奇怪的‘’，使用'或"

Here's a demo

【讨论】：

【解决方案4】：

$('#triggerDiv').click(function () {
    $(this).hide();
    $('#hiddenDiv').show(200);
});

使用撇号代替引号。

【讨论】：