Question

我想做的是让一个简单的手风琴在打开之前更改它的文本，它显示 show credits ，当它打开时，该文本应更改为 close credits 有人知道该怎么做吗？在某些网站上看到了它，我想知道如何在jquery中做到这一点

     <!-- credits -->
    <div class="credits">
        <a class="show-credits" data-toggle="collapse" href="#credits" role="button"
           aria-expanded="false" aria-controls="collapseExample">
            Show Credits
        </a>
        <div class="collapse" id="credits">
            <div class="card card-body">
                <div class="credits-body">Credits text .....
                </div>
            </div>
        </div>
    </div>
    <!-- /. credits -->

谢谢！

Answer 1

您可以将accordionbeforeactivate事件用作：

var P = new THREE.Vector3( 4, 2, 1 );
var A = new THREE.Vector3( 1, 0, 1 );
var B = new THREE.Vector3( 1, 2, 0 );

var D = B.clone().sub( A ).normalize();
var d = P.clone().sub( A ).dot( D );
var X = A.clone().add( D.clone().multiplyScalar( d ) );

下面您可以找到一个简单的演示：

$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
  // 
} );

$(function(){
  $( "#accordion" ).accordion();
  
  $( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
    var oldHeaderText = ui.oldHeader.text()
    var newHeaderText = ui.newHeader.text()
    ui.oldHeader.text(oldHeaderText.replace(' - Open', ''));
    ui.newHeader.text(newHeaderText + ' - Open');
  } );
});

Answer 2

这是您想做的事的一个例子 https://codepen.io/wadleo/pen/mzMgpL

我使用了引导程序，并使用jquery在打开和关闭手风琴时监听其事件。玩得开心。

https://codepen.io/wadleo/pen/mzMgpL

$(function() {
	$("#paperback").on("hide.bs.collapse", function(){
		$(".pp-but").html('Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>');
	});
	$("#paperback").on("show.bs.collapse", function(){
		$(".pp-but").html('Paperback Open <span class="pull-right"><i class="fa fa-minus"></i></span>');
	});
});

span, p {
    line-height: 1.2;
    font-family: Perpetua, sans-serif!important;
}

a {
    color: black;
    font-size: 15px;
    font-family: Perpetua, sans-serif!important; 
}

a:hover {
    text-decoration: none;
}


.btn-theme {
    padding: 10px 20px;
    font-size: 15px;
    background: white;
    border-radius: 0px;
    border: solid 2px #FF7F50;
    transition-duration: 0.4s;
    -webkit-transition-duration: 0.4s;
}

.btn-theme:hover {
    background-color: #FF7F50;
    color: white;
}

.book-adds {
    margin-top: 5%;
}

.book-adds span {
    width: 50%;
}

.book-adds-cont {
    width: 200px;
    height: 35px;
    padding: 8px;
    display: block;
    border-radius: 5px;
    margin-bottom: 5%;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<div class="col-xs-6 book-adds">
  <span type="button" class="pp-but" data-toggle="collapse" data-target="#paperback">Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>
  </span>
  <br>
  <span id="paperback" class="collapse">
    <a class="btn btn-theme" href="">Buy</a>
  </span>
  <br>
</div>

jQuery手风琴更改文本

2 个答案: