jQuery show/hide/toggle funktioniert, bleibt aber nicht so wie es sollte - es wird in den ursprünglichen Zustand zurückgesetzt

Ich versuche, Antworten auf FAQ-Fragen mit jQuery ein-/auszublenden. Die Idee ist, dass alle Fragen aufgelistet werden und nur wenn ein Benutzer die Antwort sehen möchte, klicken sie auf die Frage (die wie ein Link aussieht) und dann wird die Antwort sichtbar.jQuery show/hide/toggle funktioniert, bleibt aber nicht so wie es sollte - es wird in den ursprünglichen Zustand zurückgesetzt

Es funktioniert irgendwie, außer dass die Antwort in ihren ursprünglichen Zustand zurückkehrt, sobald es geklickt wird. In diesem Fall bedeutet das, dass wenn ich auf die Frage klicke, um die Antwort zu zeigen, erscheint sie und verschwindet dann im nächsten Moment, anstatt sichtbar zu bleiben, bis sie erneut angeklickt wird, um sie zu verstecken.

ich den Code unten eingefügt haben:

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

Quelle

2009-07-16 Ankur

Nun, wenn Sie auf den Link klicken, wird das OnClick-Ereignis ausgelöst wird, und nur danach wird die Seite neu geladen, weil der Link verweist auf die gleiche Seite (href = ""), und der Browser folgt dem Link.

Wenn die Seite neu geladen wird, kehrt sie in den ursprünglichen Zustand zurück und versteckt die Antwort.

Um dies zu vermeiden, müssen Sie false für die vom Click-Ereignis ausgelöste Funktion zurückgeben, damit der Browser dem Link nicht folgt.

Um es zusammenzufassen, um Ihren Code sieht wie folgt aus:

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

Alternativ Sie Ihren Link Punkt auf eine JavaScript-Funktion machen. Sie würden dann den Code oben entfernen, es mit einem Standard-Javascript-Funktion zu ersetzen:

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

und Ihr Link würde:

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

Aber denken Sie daran, nicht als Client empfohlen, mit JavaScript deaktiviert ist nicht in der Lage, die Antworten zu sehen. Sie sollten immer eine Seite haben, die ohne Javascript funktioniert, und dann Javascript hinzufügen, um es brauchbarer zu machen.

Quelle

2009-07-16 07:56:30 FWH

'href = "javascript: ..."' Du machst Witze, oder? – peirix

Mein Ziel war es, die verschiedenen Möglichkeiten zu zeigen - aber Sie haben Recht, ich habe eine Warnung dazu hinzugefügt. – FWH

Was ist, wenn Sie $('div.showhide,#answer').hide() ersetzen mit $('div.showhide,#answer').toggle();

Oder noch besser geschieht, wenn Sie können, nicht div document.ready in verstecken, kann stattdessen css display:none

Quelle

2009-07-16 07:58:50 usoban

Ich denke, es könnte ein Problem mit <a href=""> sein. .. Wenn Sie das href-Attribut entfernen (wie es sowieso nicht benötigt wird (wenn Sie den entsprechenden Cursor verwenden möchten, verwenden Sie CSS)), wird es funktionieren, at least it did for me.

Als <a href=""> ein OnClick-Ereignis auslöst und aktualisiert die Seite, können Sie das leere href Attribut mit href="#" oder href="javascript:void(0) ersetzen Sie die js Ereignis ausgeführt werden soll.

Quelle

2009-07-16 07:59:12 peirix

Eine weitere Möglichkeit, die Standard folgende Verhalten eines Hyperlinks zu verhindern, ist event.preventDefault() zu verwenden:

Verhindert, dass der Browser die Standardaktion von der Ausführung.

Ich würde vorschlagen, dieses:

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

Quelle

2009-07-16 08:03:35 karim79

jQuery show/hide/toggle funktioniert, bleibt aber nicht so wie es sollte - es wird in den ursprünglichen Zustand zurückgesetzt

Antwort

Verwandte Themen