将 "Show All" 按钮添加到 jQuery 以折叠某些区域

Question

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

切换箭头
切换可折叠区域
不更改 arrows/areas 已经展开
在切换其余部分时更改文本（从 "Show All" 到 "Hide All"）
在 SharePoint 中工作

当我单击按钮时，箭头上的切换起作用，对 "Hide All" 的初始更改起作用，但没有别的。我究竟做错了什么？（单击时各个开关效果很好。）

这是我的 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

我找到了一个解决方案，方法是将 "show all" 按钮分成两个，并在第一个操作中使用 :visible 选择器。我花了一段时间才找到只有在尚未更改的情况下才会触发文本交换的东西，但是 :contains('Show')（或 'Hide'）与 .trigger("submit") 配对时效果很好。

$(".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");
});

<button class="expand" type="button">Show All</button>
<button class="collapse" type="button">Hide All</button>

将 "Show All" 按钮添加到 jQuery 以折叠某些区域

Adding a "Show All" button to jQuery that collapses certain areas

jquery

hidden

visible