Ank*_*kur 4 jquery toggle show-hide
我尝试使用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>
好吧，当您单击该链接时，会触发 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 以使其更可用。