完成手風琴效果
阿新 • • 發佈：2018-11-25
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>手風琴</title> <script src="js/jquery-1.12.3.min.js"></script> <style> *{ margin: 0; padding: 0; } .shoufengqin{ width: 600px; margin: 80px auto; border: 1px solid lightgray; } .shoufengqin ul{ list-style: none; } .shoufengqin ul li{ border-bottom: 1px dotted black; } .shoufengqin ul li h3{ background-color: skyblue; position: relative; } .shoufengqin ul li h3 span{ position: absolute; right: 5px; } .shoufengqin ul li .cont{ display: none; } </style> </head> <body> <div class="shoufengqin"> <ul> <li> <h3>標題一<span>></span></h3> <div class="cont">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </li> <li> <h3>標題二<span>></span></h3> <div class="cont">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </li> <li> <h3>標題三<span>></span></h3> <div class="cont">內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </li> </ul> </div> <script> $('h3').click(function () { //is(':visible')表示判斷jq物件是否可見。 if($(this).siblings().is(':visible')){ //如果是可見的，就把內容div收起 $(this).siblings().slideUp(); //變更指示符號 $(this).find('span').html('>'); }else{ //在展開當前標題的內容區之前，先把所有其他的內容區收起 $(this).parent().siblings().find('.cont').slideUp(); //如果是不可見的，就把內容div顯示 $(this).siblings().slideDown(); //在變更當前li的指示符號之前，先把所有其他的li的指示符號變回去 $(this).parent().siblings().find('span').html('>'); //變更指示符號 $(this).find('span').html('v'); } }); </script> </body> </html>