[英]Toggle div text on click
這是我的 jQuery
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
這是我的 HTML
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title <span id="accordionIcon">▼</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
每當單擊新的accordion-toggle
,我需要將舊的accordionIcon
更改為相反的箭頭,新的也需要更改。 我試過使用$(".accordion-content").not($(this).next()).parent().find('#accordionIcon')
但它找不到正確的元素
這是一個小提琴。 這是你想要的?
這是我添加的代碼。
if($(this).find("span#accordionIcon").text()=="▼"){
$(this).find("span#accordionIcon").text("▲");
}
else{
$(this).find("span#accordionIcon").text("▼");
}
接受的答案僅適用於一個切換。 這是版本( Codepen ),適用於多個:
HTML
<div id="accordion">
<header class="accordion-toggle">
<h2>Accordion Title 1<span>▲</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
<header class="accordion-toggle">
<h2>Accordion Title 2<span>▲</span></h2>
</header>
<section class="entry accordion-content">
<p>Accordion Content</p>
</section>
</div>
JS
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
if ($(this).find('span').text() == '▼') {
$(this).siblings(".accordion-content").slideUp("fast");
$(this).siblings(".accordion-toggle").find('span').text('▼');
$(this).next().slideDown("fast");
$(this).find('span').text('▲');
} else {
$(this).next().slideUp("fast");
$(this).find('span').text('▼');
}
});
});
或者不改變你的代碼,你可以這樣做:
jQuery(document).ready(function($) {
$("#accordion").find(".accordion-toggle").click(function(){
var span = $(this).find('span');
if (span.hasClass('isOpened')) {
span.removeClass('isOpened').html('▲');
} else {
span.addClass('isOpened').html('▼');
}
$(this).next().slideToggle("fast");
$(".accordion-content").not($(this).next()).slideUp("fast");
});
});
如果你想使用 font-awesome
jQuery(document).ready(function($) { $("#accordion").find(".accordion-toggle").click(function(){ $(this).next().slideToggle("fast"); if($(".fa").hasClass("fa-arrow-down")){$(".fa").removeClass("fa-arrow-down").addClass("fa-arrow-up");} else $(".fa").removeClass("fa-arrow-up").addClass("fa-arrow-down"); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div id="accordion"> <header class="accordion-toggle"> <h2>Accordion Title <i class="fa fa-arrow-down"></i></h2> </header> <section class="entry accordion-content"> <p>Accordion Content</p> </section> </div>
jQuery(document).ready(function($) {
$("#accordion").find("a").click(function(){
//'all' triangles returned to initial position, because some of triangle is
//up but wich one? User can click any:
$("#accordion").find("span.rght").text("▼");
if($(this).find("span.rght").text()=="▼"){
$(this).find("span.rght").text("▲");
}
//else{$(this).find("span.rght").text("▼");} //sometime does not work!?
});
});
//see working website: http://evadapter.com/faq.html
<style>
.rght{float:right}
</style>
我放棄使用手風琴是因為我的一些客戶要求比較 2 個答案,但主要是因為使用我測試了 1000 個問題的簡單 HTML5 詳細信息控件的效率! 在我的新客戶估算的單個常見問題頁面中。 Accordion 的問題從 140 項開始,參見https://github.com/twbs/bootstrap/issues/26419
這是最簡單有效的解決方案,具有完全控制和自動“全部折疊”按鈕的出現和消失。 如果你想在真實網站上看到更高級的實現: https : //airtempheating.com/faq
<details>
<summary>
Is there any advantage to setting the thermostat fan setting to “On” or “Auto” mode all the time?</summary>
Yes! You will have constant filtering of the air. A second advantage is that the constant airflow will allow an even temperature throughout your home.
However, if your home feels very humid, set the fan to the “Auto” mode.
</details>
<details>
<summary>
How long does a typical furnace or air conditioner last?</summary>
New air conditioning and heating equipment lasts longer than ever! The end of a furnace's or air conditioner’s service life depends on more than just chronological age.
Energy-efficiency issues and the price of any necessary repairs versus the cost of upgrading to a new unit all enter into that determination.
</details> <hr>
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>
<style>
#hdn{display:none; visibility:visible}
</style>
<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.