jQuery制作效果超棒的手风琴折叠菜单

2019-11-20 12:46:11

字体：大中小

来源：转载

供稿：网友

拉风的jQuery制作的手风琴折叠菜单，效果非常不错!这里是之前版本的改进版，主要是jquery代码改进

演示图：

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

<!DOCTYPE html><html lang="en"><head>  <title>jquery js css html</title>  <meta charset="utf-8" />  <link rel="stylesheet" href="css/style.css" /></head><body>  <!--sidebar-->  <div class="sidebar">    <ul>      <li class="title"><span>一、HTML5基础教程</span><span class="arrow"></span>        <ul class="in-sidebar">          <li><a target="_blank" href="http://www.jiuni.com.cn">HTML5基础教程1</a></li>          <li><a href="#">HTML5基础教程2</a></li>          <li><a href="#">HTML5基础教程3</a></li>          <li><a href="#">HTML5基础教程4</a></li>          <li><a href="#">HTML5基础教程5</a></li>        </ul>      </li>      <li class="title"><span>二、CSS3基础教程</span><span class="arrow"></span>        <ul class="in-sidebar">          <li><a href="#">CSS3基础教程1</a></li>          <li><a href="#">CSS3基础教程2</a></li>          <li><a href="#">CSS3基础教程3</a></li>          <li><a href="#">CSS3基础教程4</a></li>          <li><a href="#">CSS3基础教程5</a></li>        </ul>      </li>      <li class="title"><span>三、Javascript基础教程</span><span class="arrow"></span>        <ul class="in-sidebar">          <li><a href="#">Javascript基础教程1</a></li>          <li><a href="#">Javascript基础教程2</a></li>          <li><a href="#">Javascript基础教程3</a></li>          <li><a href="#">Javascript基础教程4</a></li>          <li><a href="#">Javascript基础教程5</a></li>        </ul>      </li>      <li class="title"><span>四、NodeJs基础教程</span><span class="arrow"></span>        <ul class="in-sidebar">          <li><a href="#">NodeJs基础教程1</a></li>          <li><a href="#">NodeJs基础教程2</a></li>          <li><a href="#">NodeJs基础教程3</a></li>          <li><a href="#">NodeJs基础教程4</a></li>          <li><a href="#">NodeJs基础教程5</a></li>        </ul>      </li>      <li class="title"><span>五、IOS基础教程</span><span class="arrow"></span>        <ul class="in-sidebar">          <li><a href="#">IOS基础教程1</a></li>          <li><a href="#">IOS基础教程2</a></li>          <li><a href="#">IOS基础教程3</a></li>          <li><a href="#">IOS基础教程4</a></li>          <li><a href="#">IOS基础教程5</a></li>        </ul>      </li>    </ul>   </div>   <script src="js/jquery-1.8.3.min.js"></script>  <script src="js/main.js"></script></body></html>

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有所帮助。

上一篇：jQuery制作简洁的图片轮播效果

下一篇：jQuery实现左右切换焦点图