Question

我想删除阶段内容（第一个标题 - 请参阅小提琴），并且只想在我的代码中使用这些内容：

展开 - 所有步骤


第1步

第2步

第3步

上面应该在代码中没有Phase Content。但我不知道如何更改JavaScript以删除阶段内容并仅使用步骤内容

或以下是代码：

   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

我已更新了您的jsFiddle，希望您能获得解决方案。

更改 javascript 部分

jQuery(".phaseHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    jQuery(th).next(".phaseContent").slideToggle(500);
    jQuery(".phaseContent1").hide();
    jQuery(".phaseHeading").hide();
    return false;
});

更改 html 部分

<div class="phaseContent1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam.
</div>

或者您也可以从html和jQuery(".phaseContent1").hide();更改js

中删除此更改后的div

Answer 2

我更新你的小提琴。请查看此jsFiddle

我从您的HTML中删除了phaseHeading，并将一个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;
    });
});

Answer 3

您可以使用此

$(".phaseHeading .heading1").click(function () {
    $(this).toggleClass("active");
    var th = jQuery(this).parent();
    $(th).next(".phaseContent").slideToggle(500);
    $(".phaseContent1").hide();
    $(".phaseHeading").hide();
    return false;
});

同样在Div Class中进行一些更改

<div class="Content1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet.
</div>

jquery javascript show / hide toggle删除东西

展开 - 所有步骤

3 个答案: