Contents:

博客五部曲之二 - 高级博客


1186 浏览 5 years, 3 months

17 使用JQuery开关评论框

版权声明: 转载请注明出处 http://www.codingsoho.com/

到目前为止，不管是不是打算回复评论，子评论的表单输入框都是显示的，这不美观也不够动态。一个好的实现应该是默认不显示，通过按钮可以切换打开和关闭。

在post_detail.html添加回复相关的内容和class

<blockquote>
    <p>{{comment.content}}</p>
    <footer>via {{comment.user }} | {{comment.timestamp|timesince}} ago | {% if comment.children.count > 0 %}{{comment.children.count}} Comments | {% endif %} {% if comment.children.count > 1 %}s{% endif %} <a class="comment-reply-btn" href="#">Reply</a>
    </footer>
    <div class="comment-reply">
        {% for child_comment in comment.children %}
        <blockquote>
            <p>{{child_comment.content}}</p>
            <footer>via {{child_comment.user }} | {{child_comment.timestamp|timesince}} ago</footer>
        </blockquote>
        {% endfor %}                   
        <form method="post" action="">{% csrf_token %}
            {{comment_form|crispy}}
            <input type="hidden" name="parent_id" value="{{comment.id}}">
            <input type="submit" value="Post Comments" class="btn btn-default">
        </form>
    </div>
</blockquote>

在base.html里面添加了切换表单的操作，根据上面的便签进行元素选择，最后绑定fadeToggle函数

$(".comment-reply-btn").click(function(event){
    event.preventDefault();
    $(this).parent().next(".comment-reply").fadeToggle();
})

我们希望一开始form是隐藏的，所以base.css里添加css

.comment-reply{
    display: none;
}

css修改之后记得执行python manage.py collectstatic