如何创建一个简单的三级 jQuery 手风琴菜单？

Question

你能帮我做一个三级jQuery手风琴菜单吗？

我有一个功能良好的两级手风琴，但添加第三级已被证明是一个问题。

菜单 HTML 非常简单，三个级别的 UL：

<ul class="accordion">
<li><a href="#">1</a>
    <ul>
        <li><a href="#">2</a>
            <ul>
                <li><a href="#">3</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">1</a>
    <ul>
        <li><a href="#">2</a>
            <ul>
                <li><a href="#">3</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">1</a>
    <ul>
        <li><a href="#">2</a>
            <ul>
                <li><a href="#">3</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </li>
    </ul>
</li>
</ul>

调用的脚本是jquery1.9.1和jqueryui1.9.2，菜单使用手风琴功能

菜单开始于：

$(function() {
   $( ".accordion" ).accordion({    
      autoHeight: false,
      navigation: true,
      active: false
   });
});

但是当我添加第三个级别时，所有级别的项目都保持打开和可点击状态。

我花了很多时间浏览 Accordion 文档，但找不到实现第三级功能的方法。

当我尝试双重定位时，我的菜单可以正常工作（正确滑动），但是我无法点击第三层的链接！

$(function() {
   $( ".accordion, .accordion ul" ).accordion({ 
      autoHeight: false,
      navigation: true,
      active: false
   });
});

Answer 1

尝试添加 collapsible:true，它可能适合您。

演示：http://jsfiddle.net/GCu2D/756/

$(function () {
    $("ul").accordion({
        autoHeight: false,
        navigation: true,
        active: false,
        collapsible: true
    });
});

Answer 2

这是创建多级Jquery手风琴菜单的一种非常简单的方法

JS Fiddle Link:http://jsfiddle.net/abidkhanweb/pwhz1zc4/

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
   element.removeClass('open');
   element.find('li').removeClass('open');
   element.find('ul').slideUp();
  }
  else {
   element.addClass('open');
   element.children('ul').slideDown();
   element.siblings('li').children('ul').slideUp();
   element.siblings('li').removeClass('open');
   element.siblings('li').find('li').removeClass('open');
   element.siblings('li').find('ul').slideUp();
  }
 });

 $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

 (function getColor() {
  var r, g, b;
  var textColor = $('#cssmenu').css('color');
  textColor = textColor.slice(4);
  r = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  g = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  b = textColor.slice(0, textColor.indexOf(')'));
  var l = rgbToHsl(r, g, b);
  if (l > 0.7) {
   $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
   $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
  }
  else
  {
   $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
   $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
  }
 })();

 function rgbToHsl(r, g, b) {
     r /= 255, g /= 255, b /= 255;
     var max = Math.max(r, g, b), min = Math.min(r, g, b);
     var h, s, l = (max + min) / 2;

     if(max == min){
         h = s = 0;
     }
     else {
         var d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch(max){
             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
             case g: h = (b - r) / d + 2; break;
             case b: h = (r - g) / d + 4; break;
         }
         h /= 6;
     }
     return l;
 }
});
} )( jQuery );

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last has-sub'><a href='#'><span>Sub Product</span></a>
                
                    <ul>
                       <li><a href='#'><span>Sub Product</span></a></li>
                       <li class='last'><a href='#'><span>Sub Product</span></a></li>
                    </ul>
      
               </li>
            </ul>
         </li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Answer 3

我花了很多时间思考这个问题，最后的解决方案再简单不过了。

您首先需要为所有 UL 元素启动手风琴：

$(function() {
   $( ".accordion ul" ).accordion({    
      autoHeight: false,
      navigation: true,
      active: false,
   });
});

然后 destroy accordion 关卡需要激活链接（点击激活）。

$( ".accordion ul ul ul" ).accordion( "destroy" );

就是这样。 :-)

如何创建一个简单的三级 jQuery 手风琴菜单？

How to create a simple three level jQuery Accordion menu?

html

jquery

menu

accordion