jQuery手风琴更改文本
[英]jquery Accordion change Text
问题描述
what I try is to have a simple Accordion that changes it text before you open it, it displays show credits and when it's open the text should change to close credits does someone knows how to do it? 
我想做的是让一个简单的手风琴在打开文本之前先对其进行更改，它会显示信用额度 ，当打开时，该文本应更改为关闭信用额度 ，有人知道该怎么做吗？ saw it on some sites and I wonder how to do it in jquery 在某些网站上看到它，我想知道如何在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 -->
Thanks! 谢谢！
2 个解决方案
解决方案1
1 2018-10-13 10:36:11
You can use accordionbeforeactivate event as: 您可以将AccordionBeforeactivate事件用作：
$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
//
} );
Below you can find a simple demo: 您可以在下面找到一个简单的演示：
$(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'); } ); });
<html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>Section 1 - Open</h3> <div> <p> Paragraph 1 </p> </div> <h3>Section 2</h3> <div> <p> Paragraph 2 </p> </div> </div> </body> </html>
解决方案2
1 已采纳
Here is an example of what you wish to do https://codepen.io/wadleo/pen/mzMgpL 这是您想要做的事的一个例子https://codepen.io/wadleo/pen/mzMgpL
I used bootstrap and listen to its events on accordion open and close with jquery. 我使用了bootstrap，并在使用jQuery打开和关闭手风琴时监听了它的事件。 Have fun. 玩得开心。
https://codepen.io/wadleo/pen/mzMgpL 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.