演示图：
main.js
$(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click(function(){ $(tmp).children('ul').slideup().end().children('.arrow').removeclass('arrow-up'); $(this).children('ul').slidetoggle().end().children('.arrow').addclass('arrow-up'); tmp = this; }); $con.click(function(){ return false; // 阻止事件冒泡 });});
index.html
jquery js css html 一、html5基础教程 html5基础教程1 html5基础教程2 html5基础教程3 html5基础教程4 html5基础教程5 二、css3基础教程 css3基础教程1 css3基础教程2 css3基础教程3 css3基础教程4 css3基础教程5 三、javascript基础教程 javascript基础教程1 javascript基础教程2 javascript基础教程3 javascript基础教程4 javascript基础教程5 四、nodejs基础教程 nodejs基础教程1 nodejs基础教程2 nodejs基础教程3 nodejs基础教程4 nodejs基础教程5 五、ios基础教程 ios基础教程1 ios基础教程2 ios基础教程3 ios基础教程4 ios基础教程5
style.css
/*globle*/ul, li{ margin: 0; padding: 0; list-style-type: none;}a{ display: inline-block; width: 100%; height: 31px; text-decoration: none; color: #fff; font-size: 13px;}a:hover{ background: #52718a;}/*sidebar*/.sidebar{ width: 210px; height: 335px; margin: 50px auto; border-radius: 5px; font: 14px '新宋体'; color: #f4f4f4;}.title{ width: 95%; line-height: 32px; border-bottom: 1px solid #ccc; background: #1abc9c; cursor: pointer;}.title > span{ margin-left: 10px;}/*in-sidebar*/.in-sidebar{ width: 100%; display: none;}.in-sidebar > li{ width: 100%; height: 32px; background: #34495e; line-height: 32px; text-align: center; border-bottom: 1px solid #ddd;}/*arrow*/.arrow{ float: right; display: inline-block; margin-right: 5px; width: 20px; height: 32px; background: url(../img/down.png) no-repeat center;}.arrow-up{ background: url(../img/up.png) no-repeat center;}
以上所述就是本文给大家分享的全部内容了，希望能够对大家学习jquery有所帮助。