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

Question

你能帮我制作三层Jquery手风琴菜单吗？

我有一个很好运作的两级手风琴，但增加了第三级已被证明是一个问题。

菜单HTML是非常简单的，三个层次的UI的：

<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> 

调用的脚本的jQuery 1.9.1和jQuery UI的1.9.2，菜单使用手风琴功能。

菜单中开始：

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

但是，当我增加了第三级，所有级别的项目保持开放和点击。

我花了相当长的时间阅读手风琴文档，但找不到制作第三层功能的方法。

当我尝试双重定位时，我得到菜单功能（正确滑动），但比我无法点击第三级的链接！

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

Answer 1

我花了相当多的时间思考这个问题，最终解决方案并不简单。

首先需要启动手风琴所有UI元素：

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

，比破坏手风琴与需要被激活（激活点击）链接的水平。

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

就是这样。 :-)

Answer 2

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

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

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

Answer 3

这是一个非常简单的方法来创建多级jQuery的手风琴菜单

JS小提琴链接：http://jsfiddle.net/abidkhanweb/pwhz1zc4/

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

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

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

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

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