向jQuery添加“全部显示”按钮，折叠某些区域

Question

我试图在我的脚本中放置一个按钮，它将展开我所有折叠的元素。此按钮需要：

1. 切换箭头
2. 切换可折叠区域
3. 不更改已展开的箭头/区域
4. 更改文字，因为它切换其余部分（从“全部显示”到“全部隐藏”）
5. 在SharePoint中工作

当我点击按钮时，箭头上的切换工作，并且初始更改为“全部隐藏”，但没有别的。我究竟做错了什么？ （当点击时，个人切换工作很棒。）

这是我的CSS（格式化箭头），jQuery和HTML：

$(document).ready(function(){
  $("span").removeClass("arrow2");
  $("span").removeClass("arrow4");
  $(".js-textEdit").text(function () {
    return $(this).text().replace("Hide", "Show"); 
  });
  $("p.showMe").nextUntil("span.endCollapse").hide();
  $("h2.showSec").nextUntil("h2").hide();
  $(".js-textEdit").submit(function(){
    var oldText = $(this).text();
    var newText = $(this).data('text');
    $(this).text(newText).data('text',oldText);
  });
  $("p.showMe").click(function(){
    $(this).nextUntil("span.endCollapse").toggle("fast");
    $(this).find("span.arrow1").toggleClass("arrow2");
    $(this).find(".js-textEdit").trigger("submit");
  });
  $("h2.showSec").click(function(){
      $(this).nextUntil("h2").toggle("fast");
      $(this).find("span.arrow3").toggleClass("arrow4");
  });
  $(".showAll").click(function(){
    $("*").find("span.arrow1").toggleClass("arrow2");
    $("*").find("span.arrow3").toggleClass("arrow4");
    $(this).find(".js-textEdit").text(function(){
      return $(this).text().replace("Show", "Hide");
    });
    $("p.showMe").nextUntil("span.endCollapse").show("fast");
    $("h2.showSec").nextUntil("h2").show("fast");
    $(this).toggleClass("hideAll");
  });
  $(".hideAll").click(function(){
    $("*").find("span.arrow2").toggleClass("arrow1");
    $("*").find("span.arrow4").toggleClass("arrow3");
    $(this).find(".js-textEdit").text(function(){
      return $(this).text().replace("Hide", "Show");
    });
    $("p.showMe").nextUntil("span.endCollapse").hide("fast");
    $("h2.showSec").nextUntil("h2").hide("fast");
    $(this).toggleClass("showAll");
  });
});

.arrow1 {
  line height: 0%;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #000000;
  display: inline-block;
  margin: 0px 11px 0px 12px;
}

.arrow2 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 5px 5px 5px;
  border-color: #000000 transparent transparent transparent ;
  margin: 0 11px 0px 12px;
}
.arrow3 {
    line height: 0%;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 0 7px 7px;
  border-color: transparent transparent transparent #000000;
  display: inline-block;
  margin: 0px 11px 0px 12px;
}
.arrow4 {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 7px 7px 7px 7px;
  border-color: #000000 transparent transparent transparent ;
  margin: 0 11px 0px 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="showAll" type="button"><span class="js-textEdit" data-text="Hide All">Show All</span></button>
<p class="caption">The system displays the [screen name].</p> 
<p class="showMe">
   <span class="js-textEdit" data-text="Hide screen">Show screen</span><span class="arrow1"></span></p>
<p>InsertImageHere&#160;</p>
<span class="endCollapse"></span>
<h2 class="showSec">Section</h2>
<p>Content</p>
<h2>Non-Collapse Section</h2>
<p>Content</p>

我也试过这个：

$(".showAll").click(function(){
    if ($(p.showMe).nextUntil("span.endCollapse").is(":visible"){
        $(this).nextUntil("span.endCollapse").toggle("fast");
        $(this).find("span.arrow1").toggleClass("arrow2");
        $(this).find(".js-textEdit").trigger("submit");
    });
});

Answer 1

我通过制作＆＃34;显示全部＆＃34;按钮分为两部分，并使用:visible选择器进行第一个操作。我花了一段时间才找到只会触发文本交换的内容，如果它还没有被更改过，但:contains('Show')（或＆＃39;隐藏＆＃39;）与{{{{{ 1}}。

＆＃13;

＆＃13;

.trigger("submit")

＆＃13;

$(".expand").click(function(){
    $("*").find("span.arrow1").addClass("arrow2");
    $("*").find("span.arrow3").addClass("arrow4");
    $(".showMe").nextUntil(":visible").show("fast");
    $(".showSec").nextUntil(":visible").show("fast");
    $(".js-textEdit:contains('Show')").trigger("submit");
});
$(".collapse").click(function(){
    $("span").removeClass("arrow2");
    $("span").removeClass("arrow4");
    $(".showMe").nextUntil("span.endCollapse").hide("fast");
    $(".showSec").nextUntil("h2").hide("fast");
    $(".js-textEdit:contains('Hide')").trigger("submit");
});

＆＃13;

＆＃13;

＆＃13;