jQuery的显示/隐藏/切换工作，但不留，因为它应该 - 它恢复到原来的状态(jQuery sho

我尝试显示/隐藏答案使用jQuery常见问题解答的问题。我们的想法是，所有的问题都列出，仅当用户希望看到的答案，点击问题（它看起来像一个链接），那么答案变得可见。

这类型的作品不同的是，答案只要它被点击恢复到原来的状态。在这种情况下，当我点击问题来显示答案，这意味着，它显示了，然后消失在下一个瞬间，而不是直到再次单击切换它隐藏住可见。

我已经粘贴下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
<script>
    $(document).ready(function() {
        $('div.showhide,#answer').hide();
        $('#question').click(function(){
        $('div.showhide,#answer').toggle();
       });
  });
</script>
</head>
<body>
<p><a href="" id="question" name="question">Question</a></p><div id="answer"     name="answer">Answer</div></p>
</body>
</html>

Answer 1:

我觉得可能是一个问题<a href=""> ...如果你删除href属性（如无论如何都不会需要它（如果你想适当的光标，使用CSS）），它会工作，在至少它为我做的。

由于<a href="">触发onClick事件，并刷新页面，则可以更换空href与属性href="#"或href="javascript:void(0)运行JS事件。

Answer 2:

防止默认以下的超链接的行为的另一种方法是使用event.preventDefault()

从执行的默认操作，防止浏览器。

我建议这样的：

$('#question').click(function(e){
    e.preventDefault();
    $('div.showhide,#answer').toggle()
});

Answer 3:

那么，当你点击链接，就会触发onClick事件，只是在此之后，重新加载页面，因为该链接指向同一个页面（HREF =“”），浏览器下面的链接。

当重新加载页面，它会恢复到原来的状态，隐藏的答案。

为了避免这种情况，你需要通过点击事件触发的功能返回false，因此浏览器将不会跟随链接。

归纳起来，使你的代码如下所示：

$('#question').click(function(){
    $('div.showhide,#answer').toggle();
      return false;
   });

或者，你可以让你的链接指向一个JavaScript函数。这样，你会删除上面的代码，用标准的JavaScript函数替换它：

function showAnswer()
{
    $('div.showhide,#answer').toggle();
}

和你的链接将成为：

<a id="question" href="javascript:showAnswer();">

但请记住，这是不推荐，为禁止将无法看到答案的JavaScript客户端。你应该总是有没有JavaScript的网页工作，然后添加JavaScript来使它更可用。

Answer 4:

如果更换会发生什么$('div.showhide,#answer').hide()与$('div.showhide,#answer').toggle();

甚至更好，如果你可以，不要隐藏在DIV document.ready ，而是使用CSS display:none

文章来源: jQuery show/hide/toggle works, but doesn't stay as it should - it reverts to original state