Question

我正在尝试显示和隐藏网页的某些部分而不显示或隐藏其他具有相似名称的元素，例如我希望能够显示某些评论回复，而不会替换具有相同类名的其他评论回复。但我似乎无法让我的jquery正常工作。换句话说，我想点击带有view-comments类的元素，并使用more-comments

显示带有类名的最近部分

这是我简化的HTML代码。

HTML

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>


        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>

Jquery的

    $(document).ready(function() {
      $('.view-comments').click(function() {
        $('.more-comments').toggle($(this).hasClass('view-comments'));
        $(this).toggleClass('view-comments hide-comments');
      });
    });

Answer 1

要做到这一点，我会默认隐藏所有没有隐藏类active的元素。然后，当您点击链接（呼叫阻止默认为停止页面导航）时，从所有active部分中删除课程more-comments，然后将课程active添加到最近的{ {1}}部分

＆＃13;

more-comments

＆＃13;

$(document).ready(function() {
      $('.view-comments').click(function(e) {
        e.preventDefault();
        $('.more-comments').removeClass('active');
        $(this).closest('article').find('.more-comments').addClass('active');
      });
    });

＆＃13;

.more-comments:not(.active){
    display:none;
}

＆＃13;

Answer 2

var cost = RequestDecimal("How much is the item you are buying? (In Canadian Dollars)");

demo

试试这种方式

使用Jquery一次显示一个隐藏和显示部分

2 个答案: