Wie kann ich eine Verknüpfung (nicht Schaltfläche) um Text anzuzeigen und auszublenden

Question

Ich habe einen Text von Anchor-Tag begrenzt. Sobald der Benutzer darauf klickt, sollte zwischen zwei Texten umgeschaltet werden.

Ich weiß, wie man eine Schaltfläche in JQuery umschalten kann, aber weiß nicht, wie ich es mit Link implementieren.

<h1>Questions and Answers</h1> 
<p>First Question: What is the capital of Germany? 
    <br> 
    <i>Click <b><a id="toggle_this"></a>Here</a></b> to show/hide answer!</i> 
</p> 
<p>Answer: Berlin.</p> 

<script> 
    $(document).ready(function() { 
    $("toggle_this").click(function() { 
     $(this).hide(); 
    }); 
    }); 
</script> 

Answer 1

Erster Wechsel id-class="toggle_this". Verwenden Sie dann den Selektor .toggle_this.

Dann können Sie e.preventDefault() verwenden, um die Standardaktion zu stoppen, wenn der Link. Dann mit closest() und next() können Sie die Antwort <p> dann toggle() es erhalten.

$(".toggle_this").click(function (e) { 
    e.preventDefault(); 
    $(this).closest('p').next().toggle(); 
}); 

Answer 2

Sie tun können, dies mit jQuery (Sie können auch plain ol‘JS verwenden, aber es sieht aus wie Sie jQuery aus, bevor verwenden), die .on Methode. Obwohl, ich würde zunächst empfehlen eine Klasse/id auf die Antwort geben, so ist es ein bisschen sauberer:

$(document).ready(function() { 
    $('#toggle_this').on('click', function (event) { 
    event.preventDefault(); 
    $('#answer').toggle(); 
    }); 
}); 

EDIT: event.preventDefault() verhindert, dass der Anker-Tag zum href aus der Navigation und .on einen Event-Handler, damit die angegebene Funktion beim Auslösen des Ereignisses ausgeführt wird.

Answer 3

Zuerst haben Sie einen streunenden Verschlussanker </a> vor dem 'Hier'. Auch ich würde geben Sie die <p> Ihre versuchen, eine ID zu verbergen z. <p id="answer">.

Aktualisieren Sie die jQuery zu diesem.

$(document).ready(function() { 
    $("#answer").hide(); 
    $("#toggle_this").click(function() { 
     $("#answer").toggle(); 
    }); 
});