jQuery手風琴更改文本
[英]jquery Accordion change Text
問題描述
我想做的是讓一個簡單的手風琴在打開文本之前先對其進行更改，它會顯示信用額度 ，當打開時，該文本應更改為關閉信用額度 ，有人知道該怎么做嗎？ 在某些網站上看到它，我想知道如何在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 -->
謝謝！
2 個解決方案
解決方案1
1 2018-10-13 10:36:11
您可以將AccordionBeforeactivate事件用作：
$( "#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'); } ); });
<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 已采納
這是您想要做的事的一個例子https://codepen.io/wadleo/pen/mzMgpL
我使用了bootstrap，並在使用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>
JavaScript無法在JQuery Accordion中單擊時更改文本
[英]JavaScript Can't get text to change on click in JQuery Accordion
嘗試通過手風琴詳細信息中的項目更改手風琴行中標簽的文本
[英]Attempting to change text of label in accordion row via item in accordion detail
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.