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

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

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

我已粘贴以下代码：

       $(document).ready(function() { $('div.showhide,#answer').hide(); $('#question').click(function(){ $('div.showhide,#answer').toggle(); }); });    
Question
Answer
   

Answer 1

我认为可能存在问题…如果你删除了href属性（因为它不需要它（如果你想要合适的游标，请使用CSS）），它会起作用， 至少它对我有用 。

当触发onClick事件并刷新页面时，您可以使用href="#"或href="javascript:void(0)替换空白href属性以运行js事件。

Answer 2

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

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

我建议这样：

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

Answer 3

好吧，当你点击链接时，会触发onClick事件，然后重新加载页面，因为链接指向同一页面（href =“”），浏览器会跟随链接。

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

为避免这种情况，您需要在click事件触发的函数上返回false，因此浏览器不会跟随该链接。

总而言之，让你的代码看起来像这样：

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

或者，您可以将链接指向javascript函数。 然后，您将删除上面的代码，将其替换为标准的javascript函数：

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

你的链接将成为：

但请记住，不建议这样做，因为禁用javascript的客户端将无法查看答案。 你应该总是有一个没有javascript工作的页面，然后添加javascript以使其更有用。

Answer 4

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

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