向 jQuery 添加一个折叠某些区域的"Show All"按钮

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

我通过将"全部显示"按钮一分为二，并使用:visible选择器进行第一个操作，找到了解决方案。我花了一段时间才找到只有在尚未更改的情况下才会触发文本交换的东西，但是:contains('Show')(或"隐藏"(在与.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>