Question

我正在努力展示一个会话线程，每个评论都有一个评论列表，我会显示我所有的评论和子评论，但是想添加（+）和（ - ）到允许用户只显示他/她需要的子评论，但我遇到了一些麻烦。这是我的代码：

HTML：

<body>
    <div class='limit'>
        <div class='comment'>
            <div class='titre'>Titre d'un commentaire statique 1</div>
            <div class='content'>Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto</div>
            <div class='subComments'>
                <div class='reduce'>__</div>
                <div class='reduce' style="display:none;">+</div>
                <div class='comment'>
                    <div class='titre'>Titre d'un sous commentaire statique 1.1</div>
                    <div class='content'>content d'un sous commentaire statique 1.1</div>
                    <div class='subComments'>
                        <div class='reduce'>__</div>
                        <div class='reduce' style="display:none;">+</div>
                        <div class='comment'>
                            <div class='titre'>Titre d'un sous commentaire statique 1.1.1</div>
                            <div class='content'>content d'un sous commentaire statique 1.1.1</div>
                            <div class='subComments'>
                                <div class='reduce'>__</div>
                                <div class='reduce' style="display:none;">+</div>
                                <div class='comment'>
                                    <div class='titre'>Titre d'un sous commentaire statique 1.1.1.1</div>
                                    <div class='content'>content d'un sous commentaire statique 1.1.1.1</div>
                                    <div class='subComments'>
                                        <div class='reduce'>__</div>
                                        <div class='reduce' style="display:none;">+</div>
                                        <div class='comment'>
                                            <div class='titre'>Titre d'un sous commentaire statique 1.1.1.1.1</div>
                                            <div class='content'>content d'un sous commentaire statique 1.1.1.1.1</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class='comment'>
                    <div class='titre'>Titre d'un sous commentaire statique 1.2</div>
                    <div class='content'>content d'un sous commentaire statique 1.2</div>
                    <div class='subComments'>
                        <div class='reduce'>__</div>
                        <div class='reduce' style="display:none;">+</div>
                        <div class='comment'>
                            <div class='titre'>Titre d'un sous commentaire statique 1.2.1</div>
                            <div class='content'>content d'un sous commentaire statique 1.2.1</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class='comment'>
            <div class='titre'>Titre d'un commentaire statique 2</div>
            <div class='content'>content d'un commentaire statique 2</div>
            <div class='subComments'>
                <div class='comment'>
                    <div class='titre'>Titre d'un sous commentaire statique 2.1</div>
                    <div class='content'>content d'un commentaire statique 2.1</div>
                    <div class='subComments'>
                        <div class='comment'>
                            <div class='titre'>Titre d'un sous commentaire statique 2.1.1</div>
                            <div class='content'>content d'un sous commentaire statique 2.1.1</div>
                        </div>
                    </div>
                </div>
                <div class='comment'>
                    <div class='titre'>Titre d'un sous commentaire statique 2.1</div>
                    <div class='content'>content d'un commentaire statique 2.1</div>
                    <div class='subComments'></div>
                </div>
            </div>
        </div>
    </div>
</body>

我的JQuery：

$(document).ready(function () {
    $('.subComments').on('click', '.reduce', function () {
        $(".reduce").toggle("fast");
        $(this).parent().children().not('.reduce').toggle("slow");
    });
});

CSS：

.limit {
    //border: solid 1px blue;
    margin:0 auto;
    width:650px;
}
.comment {
    //border: solid 1px blue;
    margin: auto;
    width: 480px;
    border-radius: 6px;
    padding-left: 50px;
}
.titre {
    font-size: 1.2em;
    color: blue;
    padding: 12px;
}
.content {
    padding: 12px;
}
.subComments {
    border-top: solid 1px blue;
    width: 580px;
    float:left;
}
.reduce {
    font-size:1.4em;
    color: black;
    float:left;
    position: relative;
    cursor: pointer;
}

您可以查看demo以查看问题。有没有人有想法？

Answer 1

Salut l'ami！

这会成功吗？

$(document).ready(function(){
    $('body').on('click', '.reduce', function(){ 
       $(this).toggle('fast');
       $(this).siblings().toggle('slow');
    });
});

这是您更新的jsFiddle

编辑：你甚至可以做这件事：

$(document).ready(function(){
    $('body').on('click', '.reduce', function(){ 
       $(this).siblings().addBack().toggle('fast');
    });
});

Updated jsFiddle

Answer 2

我真的不明白你的问题和你的html hahha，但看看我的解决方案。

//this is the sample html
<div class="comment">
    <div class="subComment">
        //sub comments goes here
    </div>
    <button name="show">+</button>
    <button name="hide">-</button>
</div>

//this is the jquery code
$(document).ready(function(){

    //for showing the sub comments
    $('button[name=show]').click(function(){
        $this.sibling('div.subComment').show();//im not so sure about using .sibling function
    });

    //for hiding the sub comments
    $('button[name=show]').click(function(){
        $this.sibling('div.subComment').show();//just tell me if .sibling didnt work
    });

});

+和 - 显示和隐藏子列表

2 个答案: