這是一個簡單的折疊框效果實現，核心內容jQ庫里的slideToggle()方法
效果圖如下：
css代碼：
.con_ul{ padding: 0; margin: 0; overflow: auto; } .con_ul li{ list-style: none; padding: 10px; margin: 0; border-bottom: 1px solid #CCCCCC; } .con_ul li .title{ padding-right: 20px; background-image: url(images/drop_1fcaf417.png);//默認的背景 background-position: 100% 0px; background-repeat: no-repeat; } .con_ul li .title.act{ padding-right: 20px; background-image: url(images/top.png);//展開后的背景 background-position: 100% 0px; background-repeat: no-repeat; } .con{ background-color: #F4F4F4; display: none;//內容本分默認隱藏 padding: 5px; margin: 10px 0; }html代碼：使用ul li的布局本菜認為代碼結構更簡潔清晰
<ul class="con_ul"> <li> <div class="title"> 標題 </div> <div class="con"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </li> <li> <div class="title"> 標題 </div> <div class="con"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </li> <li> <div class="title"> 標題 </div> <div class="con"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div> </li> </ul>
javascript代碼：
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script> $('.con_ul li .title').click(function(){ $(this).toggleClass('act');//獲取當前點擊對象，切換act類，達到切換背景箭頭的效果 $(this).next().slideToggle();/獲取當前點擊對象的下一個兄弟級，實現折疊效果切換 }) </script>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
