.toggle()方法可以切換元素的可見性(如果是隱藏則改為顯示，若為顯示則改為隱藏)
使用 .toggle() 來達到顯示或隱藏一個 div 區塊，更可以直接變換切換其圖示 (+展開icon/-縮起icon)點擊更改圖標（switch）。
See the Pen toggle -顯示或隱藏匹配的元素 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light
1 2 3 4 5 6 7 8 9 | <div class="webgolds"> <div class="accordion1"> <i class="fa fa-plus-square-o"></i> 點我展開/關閉 </div> <div class="webgolds-list"> hello </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 | .webgolds{ text-align: center; margin-top: 10vh; font-size: 20px; } .accordion1{ cursor:pointer; } .webgolds-list{ display: none; } |
1 2 3 4 5 6 | $(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 代碼幫你做了以下動作
1 2 3 4 5 6 7 8 | $('.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' ); |
Comments are closed.