javascript - 单击或使用链接打开时更改 Accordion 标题上的文本

Question

我制作了一个可折叠的页脚，我希望单击时文本从“打开”更改为“关闭”。我已经弄清楚了这部分。我遇到的问题是我还希望在单击按钮/链接时展开页脚并以相同的方式更改文本。任何帮助将不胜感激!

//collapse footer
$("#collapseOne").on("show.bs.collapse", function() {
	$("html, body").animate({ scrollTop: 999999 }, "slow");
});

//switch between open and close when footer is clicked

 $('.switchCopy').click(function(){
    var $this = $(this);
    $this.toggleClass('switchCopy');
    if($this.hasClass('switchCopy')){
      $this.text('open');     
    } else {
      $this.text('close');
    }
  });

section {
  padding: 150px 0;
}

.red {
  background: #f98383;
}

.yellow {
  background: #ecec87;
}

.green {
  background: #c1ffc1;
}


/*footer accordion */

#accordion {
  bottom: 0;
  width: 100%;
}

.panel-default > .panel-heading {
  background: #FF4040;
}

.panel-heading {
  padding: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.panel-group .panel {
  border-radius: 0;
  background: #FF4040;
}

.panel-title a {
  color: #FFFFFF;
  text-align: center;
  width: 100%;
  display: block;
  padding: 10px 15px;
  font-size: 24px;
  font-family: Helvetica, Arial, sans-serif;
  outline: none;
}

.panel-title a:hover,
.panel-title a:focus,
.panel-title a:active {
  text-decoration: none;
  outline: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<section class="green">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Suspendisse ac libero maximus, sollicitudin ligula a, tempus turpis. Duis cursus, felis nec molestie cursus, nibh quam laoreet elit, id fringilla velit leo nec neque. Aenean nibh neque, ultricies non tortor non, lacinia suscipit nulla. Quisque
          in ultrices ante. Ut dignissim, urna ut egestas ornare, nulla erat accumsan augue, at fermentum libero eros semper ligula. Phasellus efficitur eros ac leo posuere, ultrices venenatis risus rutrum. Nullam facilisis volutpat pellentesque.</p>
          <a href="#collapseOne"  data-toggle="collapse" data-parent="#accordion"  class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  <div class="container-fluid p-0">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <p class="panel-title m-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="switchCopy">
                  open
                </a>
          </p>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
              <div class="col-md-6 offset-md-3 align-self-center">
                Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet.Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna
                maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet. Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante,
                quis convallis purus iaculis sit amet.
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</footer>

Answer 1

我所做的是为您的按钮提供一个新类主链接，并添加两个脚本，使用三元运算符(基本上是 if else 语句的简短版本)来更改单击事件时链接的文本。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

//collapse footer
$("#collapseOne").on("show.bs.collapse", function() {
	$("html, body").animate({ scrollTop: 999999 }, "slow");
});

//switch between open and close when footer is clicked

$('.primary-link').click(function(){
  $('.switchCopy').text($('.switchCopy').text() == 'close' ? 'open' : 'close');
});

$('.switchCopy').click(function(){
  $(this).text($(this).text() == 'close' ? 'open' : 'close');
});

section {
  padding: 150px 0;
}

.red {
  background: #f98383;
}

.yellow {
  background: #ecec87;
}

.green {
  background: #c1ffc1;
}


/*footer accordion */

#accordion {
  bottom: 0;
  width: 100%;
}

.panel-default > .panel-heading {
  background: #FF4040;
}

.panel-heading {
  padding: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.panel-group .panel {
  border-radius: 0;
  background: #FF4040;
}

.panel-title a {
  color: #FFFFFF;
  text-align: center;
  width: 100%;
  display: block;
  padding: 10px 15px;
  font-size: 24px;
  font-family: Helvetica, Arial, sans-serif;
  outline: none;
}

.panel-title a:hover,
.panel-title a:focus,
.panel-title a:active {
  text-decoration: none;
  outline: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<section class="green">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 mx-auto">
        <p class="lead">Suspendisse ac libero maximus, sollicitudin ligula a, tempus turpis. Duis cursus, felis nec molestie cursus, nibh quam laoreet elit, id fringilla velit leo nec neque. Aenean nibh neque, ultricies non tortor non, lacinia suscipit nulla. Quisque
          in ultrices ante. Ut dignissim, urna ut egestas ornare, nulla erat accumsan augue, at fermentum libero eros semper ligula. Phasellus efficitur eros ac leo posuere, ultrices venenatis risus rutrum. Nullam facilisis volutpat pellentesque.</p>
          <a href="#collapseOne"  data-toggle="collapse" data-parent="#accordion"  class="btn btn-primary btn-lg active primary-link" role="button" aria-pressed="true">Primary link</a>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  <div class="container-fluid p-0">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <p class="panel-title m-0">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="switchCopy">
                  open
                </a>
          </p>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
          <div class="panel-body">
              <div class="col-md-6 offset-md-3 align-self-center">
                Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet.Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna
                maximus nunc ultricies maximus. Donec congue lobortis ante, quis convallis purus iaculis sit amet. Cras id ex quis sapien condimentum aliquet a vitae turpis. In imperdiet magna maximus nunc ultricies maximus. Donec congue lobortis ante,
                quis convallis purus iaculis sit amet.
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /.container -->
</footer>