Question

我在页面上有四个“.content”部分。我希望能够切换每个部分，但也显示所有部分以显示所有“.content”。当我尝试添加show all按钮时，切换将停止工作。仍然习惯jQuery，任何帮助将不胜感激！

以下是HTML的结构：

<div class="row add-top">
         <div class="span4">

         <p class="expand"><a href="#">Show All</a></p>
          <p class="contract"><a href="#">Hide All</a></p>


    <p class="heading"><strong>Week 01 - Welcome!</strong></p><!--  WEEK --> 
    <section class="content">

        <p></p>
    </section>
    </div>  


$(document).ready(function () {
    $(".content").hide();
    //toggle the componenet with class msg_body
    $(".heading").click(function () {
        $(this).next(".content").slideToggle(500);
        $(".content").hide();
        //toggle the componenet with class msg_body
        $(".expand").click(function () {
            $(this).next(".content").slideToggle(500);
            $(".content").hide();
            //toggle the componenet with class msg_body
            $(".contract").click(function () {
                $(this).next(".content").slideToggle(500);
            });
        })
    });
}

Answer 1

尝试将所有click events组合为全部working same并使用slideDown()代替slideToggle()，同时不要使用next()使用{{1转到$('.content') selector喜欢，

toggle

Demo

如果您有$(function(){ $(".content").hide(); //toggle the componenet with class msg_body $(".heading, .expand, .contract").click(function () { $(".content").hide().slideDown(500); }); });，请使用closest()试试，

multiple-content

Answer 2

你可以尝试这样

jQuery toggle() to hide/show collapse content

Toggle-Jquery

可能会对你有所帮助。谢谢。

Answer 3

尝试

$(document).ready(function () {
    var $contents = $(".content").hide();
    $(".heading").click(function () {
        var $next = $(this).next(".content").stop(true, true).slideToggle(500);
        $contents.not($next).hide();
    });
    $(".expand").click(function () {
        $contents.stop(true, true).slideDown()
    })
    $(".contract").click(function () {
        $contents.stop(true, true).slideUp()
    });
})

演示：Fiddle

在jQuery中显示所有部分切换

3 个答案: