Question

我有两个问题。 1.我想从java中删除阶段内容，以便我只在其中包含StepsContent，因为我想展开所有步骤。 2.当我首先单击步骤1，然后单击展开全部，步骤1折叠并展开所有文本问题。任何解决方法。如果有更简单的方法通过Css这样做，请告诉我。

JSFIDDLE http://jsfiddle.net/Y3GYR/1/

或以下是代码：

   jQuery(".phaseContent").hide();
jQuery(".stepsContent").hide();
//toggle the componenet with phase level
jQuery(".phaseHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    jQuery(th).next(".phaseContent").slideToggle(500);
    return false;
});
jQuery(".stepsHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    jQuery(th).next(".stepsContent").slideToggle(500);
    return false;
});

//Expand and collapse toggle

$(".accordion-expand-all").click(function () {
    var expandLink = $(this);
    var contentAreas = $(expandLink).closest(".phaseContent").find(".stepsContent");

    // Toggle the content area visibility
    $(contentAreas).toggle();

    // If the content area is now visible
    if ($(contentAreas).is(':visible')) {
        // Change it to the collapse text
        $(expandLink).text('Collapse - all steps');
    } else {
        // Change it to the expand text
        $(expandLink).text('Expand - all steps');
    }

    $(expandLink).closest(".phaseContent").find(".stepsHeading .heading1").toggleClass("active");

    return false;
});

HTML

            <!-- Start Phase -->
                           <!-- Start phase heading -->
                            <div class="phaseHeading"><span class="heading1">Phase 1</span>
                            </div>
                            <!-- Start phase content -->
                            <div class="phaseContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.

                                   <!--Expand steps button-->
                                        <p class="accordion-expand-holder">
                                            <a class="accordion-expand-all" id="st1" href="#">Expand View - all steps</a>
                                        </p>

                                <!-- Start steps heading -->
                                    <div class="stepsHeading"><span class="heading1">Steps 1</span></div>
                                    <div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
                                    </div>

                                <!-- Start step 2  -->

                                    <div class="stepsHeading"><span class="heading1">Steps 2</span> </div>
                                    <div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
                                     </div>

                             <!-- Start step 2  -->

                                    <div class="stepsHeading"><span class="heading1">Steps 3</span> </div>
                                    <div class="stepsContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis.
                                     </div>


</div>

Answer 1

要右折叠\展开，您需要手动选择要执行的操作，如果切换元素数组

$(expandLink).closest(".phaseContent").find(".stepsContent")

它将切换每个人的可见性。只需添加一个var，然后将当前的show \ hide位置放入其中：

    var collapsed = 1;
$(".accordion-expand-all").click(function () {
    ...
        if (collapsed == 0)
     {
        $(contentAreas).hide("slide");
        $(expandLink).text('Expand - all steps');
        collapsed =1;
    }
    else
    {
        $(contentAreas).show("slide");
        $(expandLink).text('Collapse - all steps');
        collapsed = 0;
    }
})

FIDDLE

jquery javascript显示/隐藏切换问题

1 个答案: