jQuery垂直手风琴多级下拉菜单代码http://www.lanrenzhijia.com/nav/4584.html

最新推荐文章于 2021-04-10 10:28:01 发布

1092665276

最新推荐文章于 2021-04-10 10:28:01 发布

阅读量1.2k

点赞数

http://www.lanrenzhijia.com/nav/4584.html点击打开链接

html代码：

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>多级菜单</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Iconos -->
   <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>
<div style="text-align:center;clear:both">
<!--<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>-->
<!--<script src="/follow.js" type="text/javascript"></script>-->
</div>
   <!-- Contenedor -->
   <ul id="accordion" class="accordion">
      <li>
         <div class="link"><!--<i class="fa fa-paint-brush"></i>-->Diseño web<i class="fa fa-chevron-down"></i></div>
         <ul class="submenu">
            <li>
               <div href="#" class="link">Photoshop<i class="fa fa-chevron-down"></i></div>
               <ul class="submenu">
                  <li>
                     <div class="link">测试1<i class="fa fa-chevron-down"></i></div>
                     <ul class="submenu">
                        <li><a href="#">测试123</a></li>
                        <li><a href="#">测试234</a></li>
                        <li><a href="#">测试345</a></li>
                     </ul>
                  </li>
                  <li><a href="#">测试2</a></li>
                  <li><a href="#">测试3</a></li>
               </ul>
            </li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Maquetacion web</a></li>
         </ul>
      </li>
      <li>
         <div class="link"><!--<i class="fa fa-code"></i>-->Desarrollo front-end<i class="fa fa-chevron-down"></i></div>
         <ul class="submenu">
            <li><a href="#">Javascript</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Frameworks javascript</a></li>
         </ul>
      </li>
      <li>
         <div class="link"><!--<i class="fa fa-mobile"></i>-->Diseño responsive<i class="fa fa-chevron-down"></i></div>
         <ul class="submenu">
            <li><a href="#">Tablets</a></li>
            <li><a href="#">Dispositivos mobiles</a></li>
            <li><a href="#">Medios de escritorio</a></li>
            <li><a href="#">Otros dispositivos</a></li>
         </ul>
      </li>
      <li><div class="link"><!--<i class="fa fa-globe"></i>-->Posicionamiento web<i class="fa fa-chevron-down"></i></div>
         <ul class="submenu">
            <li><a href="#">Google</a></li>
            <li><a href="#">Bing</a></li>
            <li><a href="#">Yahoo</a></li>
            <li><a href="#">Otros buscadores</a></li>
         </ul>
      </li>
   </ul>

  <script src='../js/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>

css代码：

* {
   margin: 0;
   padding: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

body {
   background: #2d2c41;
   font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
}

ul {
   list-style-type: none;
}

a {
   color: #b63b4d;
   text-decoration: none;
}

/** =======================
 * Contenedor Principal
 ===========================*/
h1 {
   color: #FFF;
   font-size: 24px;
   font-weight: 400;
   text-align: center;
   margin-top: 80px;
 }

h1 a {
   color: #c12c42;
   font-size: 16px;
 }

 .accordion {
   width: 100%;
   max-width: 360px;
   margin: 30px auto 20px;
   background: #FFF;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
 }

.accordion .link {
   cursor: pointer;
   display: block;
   padding: 15px 15px 15px 42px;
   color: #4D4D4D;
   font-size: 14px;
   font-weight: 700;
   border-bottom: 1px solid #CCC;
   position: relative;
   -webkit-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.accordion li:last-child .link {
   border-bottom: 0;
}

.accordion li i {
   position: absolute;
   top: 16px;
   left: 12px;
   font-size: 18px;
   color: #595959;
   -webkit-transition: all 0.4s ease;
   -o-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

.accordion li i.fa-chevron-down {
   right: 12px;
   left: auto;
   font-size: 16px;
}

.accordion li.open>.link {
   /*color: #b63b4d;*/
   color:#595959;
}

.accordion li.open i {
   /*color: #b63b4d;*/
   color:#595959;
}
.accordion li.open>.link>i.fa-chevron-down {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
}

/**
 * Submenu
 -----------------------------*/
 .submenu {
   display: none;
   background: #444359;
   font-size: 14px;
 }

 .submenu li {
   border-bottom: 1px solid #4b4a5e;
    background-color: #fff;
 }

 .submenu a {
   display: block;
   text-decoration: none;
   color: #595959;
   padding: 12px;
   padding-left: 42px;
   -webkit-transition: all 0.25s ease;
   -o-transition: all 0.25s ease;
   transition: all 0.25s ease;
 }

 .submenu a:hover {
   /*background: #b63b4d;*/
   color: #595959;
 }
 .accordion li ul li .link,.accordion li ul li a{
    padding-left:58px;
 }
.accordion li ul li ul li .link,.accordion li ul li ul li a{
   padding-left:68px;
}
.accordion li ul li ul li ul li a{
    padding-left:78px;
}

js代码：

$(function() {
   var Accordion = function(el, multiple) {
      this.el = el || {};
        this.multiple = multiple || true;
      // Variables privadas
      var links = this.el.find('.link');
      // Evento
      links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
   };

   Accordion.prototype.dropdown = function(e) {
      var $el = e.data.el,
         $this = $(this),
         $next = $this.next();

      $next.slideToggle();
      $this.parent().toggleClass('open');

      if (!e.data.multiple) {
         $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
      };
   };

   var accordion = new Accordion($('#accordion'), false);
});

解释：

multiple的作用是用来控制是否能展开多个列表（这里传入false，每次就只能展开一个，展开另外一个就收起前面展开的）
{el: this.el, multiple: this.multiple}这个就是传入到函数里面的数据data
所以在这里e.data就相当于{el: this.el, multiple: this.multiple}那么e.data.el就是取得其中的值了this.el。
然后就是$el.find('.submenu')这个选择器取到了id为accordion元素下面的所有class为submenu的ul，但是这里只要展开当前你点击的li下面的ul。而不需要其他的展开。所以用到了.not($next).就是非当前点击中的其他li下面的ul都隐藏。第一个问题的参数multiple就是用来判断执不执行这句代码
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};

1092665276

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery垂直手风琴多级下拉菜单代码http://www.lanrenzhijia.com/nav/4584.html

http://www.lanrenzhijia.com/nav/4584.html点击打开链接html代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多级菜单&lt;/title&gt; &lt;meta name="v
复制链接

扫一扫