Question

我尝试使用jQuery显示/隐藏FAQ问题的答案。我们的想法是列出所有问题，并且只有当用户想要查看他们点击问题的答案（看起来像一个链接）时，答案才会变得可见。

除了单击单击后答案恢复到原始状态外，它的工作方式很有效。在这种情况下，这意味着当我单击问题以显示答案时，它会显示然后在下一个瞬间消失，而不是保持可见，直到再次单击以将其切换为隐藏。

我已粘贴以下代码：

<!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）），它会起作用， at least it did for me。

当<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 =“”），浏览器会跟随链接。< / p>

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

为避免这种情况，您需要在click事件触发的函数上返回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();

，会发生什么情况

或者甚至更好，如果可以，请不要在document.ready中隐藏div，而是使用css display:none

jQuery show / hide / toggle工作，但不能保持原样 - 它恢复到原始状态

4 个答案: