单击或使用链接打开时更改手风琴标题上的文本

时间：2018-02-01 23:27:14

标签： javascript jquery twitter-bootstrap

我做了一个可折叠的页脚，我希望文本从＆＃34;打开＆＃34;到＆＃34;关闭＆＃34;点击时。我有这个部分想通了。我遇到的问题是，当点击按钮/链接时，我也希望页脚扩展并且文本以相同的方式更改。任何帮助将不胜感激！

＆＃13;
＆＃13; 
//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');
    }
  });
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

要完成此操作，请在“on show”手风琴事件处理程序中添加文本切换代码，并使用相同的文本切换逻辑添加“on hide”手风琴事件处理程序。我将文本切换逻辑放在它自己的函数中。例如：

var $switch = $('.switchCopy');
//changes footer text based on inclusion of switchCopy class
function toggleAccordionText() {
    $switch.toggleClass('switchCopy');
    if($switch.hasClass('switchCopy')){
      $switch.text('open');     
    } else {
      $switch.text('close');
    }
};

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

//switch between open and close when footer is clicked
$switch.click(toggleAccordionText);

答案 1 :(得分：1)

我所做的是给你的按钮一个新的主要主链接，并添加了两个用于更改单击事件链接文本的程序，使用三元运算符，它基本上是if else语句的简短版本。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

＆＃13;
＆＃13; 
//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');
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题