文章/答案/技术大牛

发布

社区首页 >问答首页 >jquery javascript显示/隐藏切换问题

问jquery javascript显示/隐藏切换问题
EN

Stack Overflow用户

提问于 2014-05-06 04:09:10

回答 1查看 207关注 0票数 1

我有两个问题。1.我希望从java中删除阶段内容，以便只在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>

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-05-06 04:29:41

要正确折叠\展开，您需要手动选择要做什么，如果您切换元素数组

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

它将切换他们每一个的能见度。只需添加一个var，并将当前的显示\隐藏位置放入其中，如下所示：

    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;
    }
})

小提琴

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23485811

复制

相似问题

问jquery javascript显示/隐藏切换问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery javascript显示/隐藏切换问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jquery javascript显示/隐藏切换问题
EN