Stack Overflow em Português Asked by Igor on September 21, 2020
Estou tentando utilizar fadeToggle()
na seção de comentários do meu blog para abrir o formulário de respostas aos comentários já existentes. Inicialmente estou aplicando display: none
com CSS para esconder as a lista de comentários e o formulário. A ação de fadeOut deve ser realizada ao clicar no link ‘Responder’. Entretanto, quando eu clico em responder, eu vou direto para o início da pagina e o efeito não funciona. Revisei a hierarquia no html para ter certeza que que a função seria redirecionada para o classe correta, mas, mesmo assim, algo não está correto.
html
<blockquote class="blockquote">
<p>{{ comment.content }}</p>
<footer class="blockquote-footer">Por: {{ comment.user }} | {{ comment.timestamp|timesince }} atrás |
{% if comment.children.count > 0 %}{{ comment.children.count }} comentário{% if comment.children.count > 1 %}s
{% endif %} | {% endif %}<a class="comment-reply-btn" href="#">Responder</a>
</footer>
<div class="comment-reply">
{% for child_comment in comment.children %}
<blockquote class="blockquote">
<p class="mb-0">{{ child_comment.content }}</p>
<footer class="blockquote-footer">Por: {{ child_comment.user }} |
{{ child_comment.timestamp|timesince }}
atrás
</footer>
</blockquote>
{% endfor %}
{% if request.user.is_authenticated %}
<form action="" method="POST">
{% csrf_token %}
{{ comment_form|crispy }}
<input type="hidden" name="parent_id" value="{{ comment.id }}">
<input class="btn btn-secondary" type="submit" value="Responder">
</form>
{% else %}
<p>Você deve logar para comentar</p>
{% endif %}
</div>
</blockquote>
css
.comment-reply {
display: none;
}
js
<script type="text/javascript">
$(document).ready(function () {
$(".comment-reply-btn").click(function (event) {
event.preventDefault();
$(this).parent().next(".comment-reply").fadeToggle();
})
})
</script>
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP