javascript - jquery javascript 显示/隐藏切换删除内容

Question

我想删除阶段内容(第一个标题 - 参见 fiddle )并且我的代码中只需要这些内容:

Expand - all steps

• Steps 1
• Steps 2
• Steps 3

上面的代码应该在没有阶段内容的情况下出现。但我不知道如何更改 javascript 以删除阶段内容并仅使用步骤内容

JSFIDDLE

或者下面是代码:

   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

我更新了你的 fiddle 。请检查这个 jsFiddle

我删除了 phaseHeading从您的 HTML 中将一个 Div 放在 accordion-expand-holder 上方姓名<div class="stepsParent">

<div class="stepsParent">
    <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>

也像下面这样改变JS

$(document).ready(function () {
    $(".accordion-expand-all").parent().parent().find(".stepsContent").hide("slide");
    jQuery(".stepsHeading .heading1").click(function () {
        $(this).toggleClass("active");
        var th = jQuery(this).parent();
        jQuery(th).next(".stepsContent").slideToggle(500);
        return false;
    });

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

        if (collapsed == 0){
            $(contentAreas).hide("slide");
            collapsed =1;
            $(expandLink).text('Expand - all steps');
        } else {
            $(contentAreas).show("slide");
            collapsed = 0;
            $(expandLink).text('Collapse - all steps');
        }
        $(expandLink).closest(".stepsHeading .heading1").toggleClass("active");
        return false;
    });
});