[英]How to create a simple three level jQuery Accordion menu?
Can you help me to make a three-level jQuery accordion menu? 你能帮我制作一个三级jQuery手风琴菜单吗?
I have had a nicely functioning two-level accordion, but adding a third level has proven to be a problem. 我有一个功能很好的两级手风琴,但增加第三级已被证明是一个问题。
The menu HTML is pretty straightforward, three levels of ULs: 菜单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>
The scripts called are jquery 1.9.1 and jquery ui 1.9.2, and the menu uses accordion function. 调用的脚本是jquery 1.9.1和jquery ui 1.9.2,菜单使用accordion函数。
The menu was started with: 菜单开始于:
$(function() {
$( ".accordion" ).accordion({
autoHeight: false,
navigation: true,
active: false
});
});
But when I added a third level, all of the level items remained open and clickable. 但是当我添加第三级时,所有级别项都保持打开和可点击状态。
I spend considerable time going through Accordion documentation, but can't find a way to make third level function. 我花了相当多的时间阅读Accordion文档,但找不到制作第三级功能的方法。
When I tried double targeting, I got the menu to function (sliding correctly), but than I wasn't able to click the links on the third level! 当我尝试双重定位时,我让菜单正常运行(正确滑动),但是我无法点击第三级的链接!
$(function() {
$( ".accordion, .accordion ul" ).accordion({
autoHeight: false,
navigation: true,
active: false
});
});
Here is a very simple way to create multiple level Jquery Accordion menu 这是创建多级Jquery Accordion菜单的一种非常简单的方法
JS Fiddle Link: http://jsfiddle.net/abidkhanweb/pwhz1zc4/ 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>
Try adding collapsible:true
, it might work for you. 尝试添加
collapsible:true
,它可能适合您。
Demo: http://jsfiddle.net/GCu2D/756/ 演示: http : //jsfiddle.net/GCu2D/756/
$(function () {
$("ul").accordion({
autoHeight: false,
navigation: true,
active: false,
collapsible: true
});
});
I spent considerable time pondering this, and in the end solution couldn't be simpler. 我花了相当多的时间思考这个问题,最终解决方案变得更加简单。
You first need to start accordion for all UL elements: 首先需要为所有UL元素启动手风琴:
$(function() {
$( ".accordion ul" ).accordion({
autoHeight: false,
navigation: true,
active: false,
});
});
and than destroy accordion for the level with links that need to be active (activate on click). 而不是破坏手风琴的水平与需要激活的链接(点击激活)。
$( ".accordion ul ul ul" ).accordion( "destroy" );
And that's it. 就是这样。 :-)
:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.