jQuery-toggle-顯示或隱藏匹配的元素

.toggle()方法可以切換元素的可見性(如果是隱藏則改為顯示，若為顯示則改為隱藏)

使用 .toggle() 來達到顯示或隱藏一個 div 區塊，更可以直接變換切換其圖示 (+展開icon/-縮起icon)點擊更改圖標（switch）。

See the Pen toggle -顯示或隱藏匹配的元素 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

<div class="webgolds">
  <div class="accordion1">
    <i class="fa fa-plus-square-o"></i>
    點我展開/關閉
  </div>
  <div class="webgolds-list">
    hello
  </div>
</div>

點我展開/關閉

</div>

hello

</div>

.webgolds{
	text-align: center;
	margin-top: 10vh;
	font-size: 20px;
}
.accordion1{
	cursor:pointer;
}
.webgolds-list{
	display: none;
}

.webgolds{

text-align: center;

margin-top: 10vh;

font-size: 20px;

}

.accordion1{

cursor:pointer;

}

.webgolds-list{

display: none;

}

$(document).ready(function(e) {
  $('.accordion1').on( "click", function() {
    $(this).closest('.webgolds').find('.webgolds-list').toggle();
    $("i", this).toggleClass("fa-plus-square-o fa-minus-square-o");
  });
});

$(document).ready(function(e) {

$('.accordion1').on( "click", function() {

$(this).closest('.webgolds').find('.webgolds-list').toggle();

$("i", this).toggleClass("fa-plus-square-o fa-minus-square-o");

});

說明

2行 jQuery 代碼幫你做了以下動作

$('.webgolds-list').show();
$('.webgolds-list').hide();

$( "i" ).addClass( 'fa-plus-square-o' );
$( "i" ).removeClass( 'fa-minus-square-o' );

$( "i" ).addClass( 'fa-minus-square-o' );
$( "i" ).removeClass( 'fa-plus-square-o' );

$('.webgolds-list').show();

$('.webgolds-list').hide();

$( "i" ).addClass( 'fa-plus-square-o' );

$( "i" ).removeClass( 'fa-minus-square-o' );

$( "i" ).addClass( 'fa-minus-square-o' );

$( "i" ).removeClass( 'fa-plus-square-o' );

資料來源

[jQuery] toggle 範例-顯示或隱藏匹配的元素 (toggleClass)

標籤雲

說明

資料來源