Как переключить ссылку (не кнопку), чтобы отображать и скрывать текст

Question

У меня есть текст, ограниченный тегом привязки. Как только пользователь нажмет на него, он должен переключаться между двумя текстами.

У меня есть знания о том, как переключать кнопку в JQuery, но не знаю, как ее реализовать со ссылкой.

<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

Первое изменение id к class="toggle_this". Затем используйте селектор .toggle_this.

Затем вы можете использовать e.preventDefault(), чтобы остановить действие по умолчанию, если ссылка. Затем, используя closest() и next(), вы можете получить ответ <p>, затем toggle().

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

Answer 2

вы могли бы сделать это с помощью JQuery (вы также можете использовать обычный ол»JS, но, похоже, что вы используете JQuery из ранее), используя метод .on. Хотя, я бы первым рекомендую вам добавить класс/идентификатор для ответа, так что это немного чище:

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

EDIT: event.preventDefault() предотвращает якорный тег от навигации к HREF и .on регистрирует обработчик события, так что указанная функция выполняется при срабатывании события.

Answer 3

Сначала у вас есть блуждающий якорь </a> перед «Здесь». Также я бы дал <p>, пытаясь скрыть идентификатор, например. <p id="answer">.

Обновите jQuery.

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