5

我尝试使用 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>
4

4 回答 4

5

我认为...可能有问题<a href="">如果您删除 href 属性（因为无论如何都不需要它（如果您想要适当的光标，请使用 CSS）），它会起作用，至少它对我有用。

由于<a href="">触发了一个onClick事件并刷新了页面，可以将空白href属性替换为href="#"或href="javascript:void(0)运行js事件。

于 2009-07-16T07:59:12.770 回答
4

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

阻止浏览器执行默认操作。

我建议这样做：

$('#question').click(function(e){
    e.preventDefault();
    $('div.showhide,#answer').toggle()
});
于 2009-07-16T08:03:35.383 回答
2

好吧，当你点击链接时，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 以使其更可用。

于 2009-07-16T07:56:30.373 回答
0

如果您替换$('div.showhide,#answer').hide()为$('div.showhide,#answer').toggle();

或者更好的是，如果可以的话，不要隐藏 div document.ready，而是使用 cssdisplay:none

于 2009-07-16T07:58:50.727 回答