jQuery afficher/masquer/bascule fonctionne, mais ne reste pas comme il se doit - il revient à l'état d'origine

Je suis d'essayer d'afficher/cacher les réponses aux questions FAQ en utilisant jQuery. L'idée est que toutes les questions sont listées et seulement lorsqu'un utilisateur veut voir la réponse, il clique sur la question (qui ressemble à un lien) et ensuite la réponse devient visible.jQuery afficher/masquer/bascule fonctionne, mais ne reste pas comme il se doit - il revient à l'état d'origine

Cela fonctionne en quelque sorte, sauf que la réponse revient à son état d'origine dès que l'on clique dessus. Dans ce cas, cela signifie que lorsque je clique sur la question pour afficher la réponse, celle-ci apparaît puis disparaît à l'instant suivant plutôt que de rester visible jusqu'à ce que l'utilisateur clique à nouveau dessus pour la masquer.

J'ai collé le code ci-dessous:

<!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>

Source

2009-07-16 Ankur

Eh bien, lorsque vous cliquez sur le lien, l'événement onClick est déclenché, et juste après, la page est rechargée, parce que le lien pointe vers la même page (href = ""), et le navigateur suit le lien. Lorsque la page est rechargée, elle revient à son état d'origine, masquant la réponse. Pour éviter cela, vous devez retourner false sur la fonction déclenchée par l'événement click, afin que le navigateur ne suive pas le lien.

En résumé, faire ressembler votre code comme ceci:

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

Alternativement, vous pouvez faire votre point de lien vers une fonction javascript. Vous pouvez ensuite supprimer le code ci-dessus, en le remplaçant par une norme fonction javascript:

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

et votre lien deviendrait:

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

Mais gardez à l'esprit que ce n'est pas recommandé, en tant que client JavaScript désactivé ne sera pas en mesure de voir les réponses. Vous devriez toujours avoir une page qui fonctionne sans javascript, puis ajoutez javascript pour le rendre plus utilisable.

Source

2009-07-16 07:56:30 FWH

'href = "javascript: ..."' Vous plaisantez? – peirix

Mon but était de montrer les différentes façons de le faire - mais vous avez raison, j'ai ajouté un avertissement à ce sujet. – FWH

Qu'est-ce qui se passe si vous remplacez $('div.showhide,#answer').hide() avec $('div.showhide,#answer').toggle();

Ou encore mieux, si vous pouvez, ne cache pas div dans document.ready, utilisez plutôt css display:none

Source

2009-07-16 07:58:50 usoban

Je pense qu'il pourrait y avoir un problème avec <a href="">. .. Si vous supprimez l'attribut href (comme il n'est pas nécessaire de toute façon (si vous voulez le curseur approprié, utilisez CSS)), il va fonctionner, at least it did for me.

Comme <a href=""> déclenche un événement onClick et actualise la page, vous pouvez remplacer l'attribut href blanc avec href="#" ou href="javascript:void(0) pour exécuter l'événement js.

Source

2009-07-16 07:59:12 peirix

Une autre façon de prévenir le comportement par défaut suivant d'un lien hypertexte est d'utiliser event.preventDefault():

Prévient le navigateur d'exécuter l'action par défaut.

Je suggère ceci:

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

Source

2009-07-16 08:03:35 karim79

jQuery afficher/masquer/bascule fonctionne, mais ne reste pas comme il se doit - il revient à l'état d'origine

Répondre

Questions connexes