用JQ做的手风琴式下拉菜单

最新推荐文章于 2024-09-10 06:15:30 发布

weixin_34266504

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量96

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/txs836680030/p/3657728.html

版权

今天看了下手风琴式下拉菜单，于是想自己做个出来，废话不多说先贴代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
      <style type="text/css">
        ul{
          list-style: none;
          }
        li{
            height:40px;
            line-height: 40px;
            width: 150px;
            text-align: center;
            font-family: '微软雅黑';
            border-bottom: 1px solid #222;
            background-color: #eee;
            cursor: pointer;
            display: none;
          }
         .title
         {
             background-color: #888888;
             color: #fff;
             border-bottom: 1px solid #eeeeee;
             display: block;
         }
         .context{
             height:120px ;
             width: 150px;
         }
        .context li
        {
            display: block;
            margin-left: -40px;
        }
      </style>
</head>
<body>
  <ul class="hole">
      <li class="title">html5基础教程</li>
      <li class="context">
          <ul>
              <li>html5基础教程01</li>
              <li>html5基础教程02</li>
              <li>html5基础教程03</li>
  </ul>
  </li>
      <li class="title">css3基础教程</li>
      <li class="context">
          <ul>
              <li>css3基础教程01</li>
              <li>css3基础教程02</li>
              <li>css3基础教程03</li>
  </ul>
  </li>
      <li class="title">JS基础教程</li>
      <li class="context">
          <ul>
              <li>JS基础教程01</li>
              <li>JS基础教程02</li>
              <li>JS基础教程03</li>
  </ul>
  </li>
      <li class="title">PHP基础教程</li>
      <li class="context">
          <ul>
              <li>JS基础教程01</li>
              <li>JS基础教程02</li>
              <li>JS基础教程03</li>
          </ul>
      </li>
      <li class="title">IOS基础教程</li>
             <li class="context">
                 <ul>
                     <li>IOS基础教程01</li>
                     <li>IOS基础教程02</li>
                     <li>IOS基础教程03</li>
                  </ul>
             </li>

   </ul>



<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">

      $(".title").click(
              function(){

                      $(".context").not($(this).next()).slideUp(500);
                  if($(this).next()[0].style.display=="list-item")
                  {
                      $(this).next().slideUp(500);
                  }
                  else{
                      $(this).next().slideDown(500);
                  }
            }
      )  ;
      $(".context ul li").hover(
              function(){
                  $(this)[0].style.backgroundColor="#ccc"
              } ,
              function(){
                  $(this)[0].style.backgroundColor="#eee"
              }
      )
</script>
</body>
</html>

通过用JQ中的slideDown和slideUp函数来达到动态切换的效果。也许有人会不懂其中的‘list-item’是干嘛的，其实‘list-item’就是让元素按照列表排列。

转载于:https://www.cnblogs.com/txs836680030/p/3657728.html

weixin_34266504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JQ做的手风琴式下拉菜单

今天看了下手风琴式下拉菜单，于是想自己做个出来，废话不多说先贴代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> ...
复制链接

扫一扫