0
我有一個手風琴jquery菜單，默認情況下它通過點擊類別來展開它並顯示子菜單。但現在我需要菜單顯示所有類別和子菜單一直擴大（我不再需要「崩潰」功能了）我只是想保持基本菜單的樣式和一些效果..手風琴菜單如何擴展所有類別？ - jQuery Accordeon Menu
下面的代碼：
(function($, window, document, undefined) {
var pluginName = "accordion";
var defaults = {
speed: 200,
showDelay: 0,
hideDelay: 0,
singleOpen: false,
clickEffect: true,
indicator: 'submenu-indicator-minus',
subMenu: 'submenu',
event: 'click touchstart' // click, touchstart
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
$.extend(Plugin.prototype, {
init: function() {
this.openSubmenu();
this.submenuIndicators();
if (defaults.clickEffect) {
this.addClickEffect();
}
},
openSubmenu: function() {
$(this.element).children("ul").find("li").bind(defaults.event, function(e) {
e.stopPropagation();
e.preventDefault();
var $subMenus = $(this).children("." + defaults.subMenu);
var $allSubMenus = $(this).find("." + defaults.subMenu);
if ($subMenus.length > 0) {
if ($subMenus.css("display") == "none") {
$subMenus.slideDown(defaults.speed).siblings("a").addClass(defaults.indicator);
if (defaults.singleOpen) {
$(this).siblings().find("." + defaults.subMenu).slideUp(defaults.speed)
.end().find("a").removeClass(defaults.indicator);
}
return false;
} else {
$(this).find("." + defaults.subMenu).delay(defaults.hideDelay).slideUp(defaults.speed);
}
if ($allSubMenus.siblings("a").hasClass(defaults.indicator)) {
$allSubMenus.siblings("a").removeClass(defaults.indicator);
}
}
window.location.href = $(this).children("a").attr("href");
});
},
submenuIndicators: function() {
if ($(this.element).find("." + defaults.subMenu).length > 0) {
$(this.element).find("." + defaults.subMenu).siblings("a").append("<span class='submenu-indicator'>+</span>");
}
},
addClickEffect: function() {
var ink, d, x, y;
$(this.element).find("a").bind("click touchstart", function(e) {
$(".ink").remove();
if ($(this).children(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate-ink");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width()/2;
y = e.pageY - $(this).offset().top - ink.height()/2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate-ink");
});
}
});
$.fn[pluginName] = function(options) {
this.each(function() {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
return this;
};
})(jQuery, window, document);* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #f0f0f0;
font-family: 'Open Sans'
}
.content {
margin: 100px auto;
width: 260px;
}
.colors {
float: left;
margin: 20px auto;
width: 260px;
}
.colors a {
float: left;
height: 30px;
width: 33.33333333%;
}
.colors .default {
background: #414956;
}
.colors .blue {
background: #4a89dc;
}
.colors .white {
background: #ffffff;
}
.menu {
box-shadow: 0 20px 50px #333333;
float: left;
min-width: 260px;
outline: 0;
position: relative;
}
.menu * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
}
.menu .menu-footer {
background: #414956;
color: #f0f0f0;
float: left;
font-weight: normal;
height: 50px;
line-height: 50px;
font-size: 6px;
width: 100%;
text-align: center;
}
.menu .menu-header {
background: #414956;
color: #f0f0f0;
font-weight: bold;
height: 50px;
line-height: 50px;
text-align: center;
width: 100%;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: block;
float: left;
position: relative;
width: 100%;
}
.menu ul li a {
background: #414956;
color: #f0f0f0;
float: left;
font-size: 13px;
overflow: hidden;
padding: 14px 22px;
position: relative;
text-decoration: none;
white-space: nowrap;
width: 100%;
}
.menu ul li a i {
float: left;
font-size: 16px;
line-height: 18px;
text-align: left;
width: 34px;
}
.menu ul li .menu-label {
background: #f0f0f0;
border-radius: 100%;
color: #555555;
font-size: 11px;
font-weight: 800;
line-height: 18px;
min-width: 20px;
padding: 1px 2px 1px 1px;
position: absolute;
right: 18px;
text-align: center;
top: 14px;
}
.menu ul .submenu {
display: none;
position: static;
width: 100%;
}
.menu ul .submenu .submenu-indicator {
line-height: 16px;
}
.menu ul .submenu li {
clear: both;
width: 100%;
}
.menu ul .submenu li ul.submenu {
display: none;
position: static;
width: 100%;
overflow: hidden;
}
.menu ul .submenu li a {
background: #383838;
border-left: solid 6px transparent;
border-top: none;
float: left;
font-size: 11px;
position: relative;
width: 100%;
}
.menu ul .submenu li:hover > a {
border-left-color: #414956;
}
.menu ul .submenu li .menu-label {
background: #f0f0f0;
border-radius: 100%;
color: #555555;
font-size: 11px;
font-weight: 800;
line-height: 18px;
min-width: 20px;
padding: 1px 2px 1px 1px;
position: absolute;
right: 18px;
text-align: center;
top: 12px;
top: 14px;
}
.menu ul .submenu > li > a {
padding-left: 30px;
}
.menu ul .submenu > li > ul.submenu > li > a {
padding-left: 45px;
}
.menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a {
padding-left: 60px;
}
.menu .submenu-indicator {
-moz-transition: "transform .3s linear";
-o-transition: "transform .3s linear";
-webkit-transition: "transform .3s linear";
transition: "transform .3s linear";
float: right;
font-size: 20px;
line-height: 19px;
position: absolute;
right: 22px;
}
.menu .submenu-indicator-minus > .submenu-indicator {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu > ul > li.active > a {
background: #3b424d;
color: #ffffff;
}
.menu > ul > li:hover > a {
background: #3b424d;
color: #ffffff;
}
.menu > ul > li > a {
border-bottom: solid 1px #3b424d;
}
.ink {
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
background: rgba(255, 255, 255, 0.3);
border-radius: 100%;
display: block;
position: absolute;
transform: scale(0);
}
.animate-ink {
-moz-animation: ripple .3s linear;
-ms-animation: ripple .3s linear;
-o-animation: ripple .3s linear;
-webkit-animation: ripple .3s linear;
animation: ripple .3s linear;
}
@-moz-keyframes 'ripple' {
100% {
opacity: 0;
transform: scale(2.5);
}
}
@-webkit-keyframes 'ripple' {
100% {
opacity: 0;
transform: scale(2.5);
}
}
@keyframes 'ripple' {
100% {
opacity: 0;
transform: scale(2.5);
}
}
.blue.menu .menu-footer {
background: #4a89dc;
}
.blue.menu .menu-header {
background: #4a89dc;
}
.blue.menu ul li > a {
background: #4a89dc;
}
.blue.menu ul ul.submenu li:hover > a {
border-left-color: #3e82da;
}
.blue.menu > ul > li.active > a {
background: #3e82da;
}
.blue.menu > ul > li:hover > a {
background: #3e82da;
}
.blue.menu > ul > li > a {
border-bottom-color: #3e82da;
}
.white.menu .menu-footer {
background: #ffffff;
color: #555555;
}
.white.menu .menu-header {
background: #ffffff;
color: #555555;
}
.white.menu ul li a {
background: #ffffff;
color: #555555;
}
.white.menu ul ul.submenu li:hover > a {
border-left-color: #f0f0f0;
}
.white.menu ul ul.submenu li a {
color: #f0f0f0;
}
.white.menu > ul > li.active > a {
background: #f0f0f0;
}
.white.menu > ul > li:hover > a {
background: #f0f0f0;
}
.white.menu > ul > li > a {
border-bottom-color: #f0f0f0;
}
.white.menu > ul > li > a > .ink {
background: rgba(0, 0, 0, 0.1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>CH Foods Inc. - Orders</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet" />
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js" crossorigin="anonymous" integrity="sha256-e9gNBsAcA0DBuRWbm0oZfbiCyhjLrI6bmqAl5o+ZjUA="></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
</script>
<script>
jQuery(document).ready(function($) {
$("#menu").accordion();
$(".colors a").click(function() {
if ($(this).attr("class") != "default") {
$("#menu").removeClass();
$("#menu").addClass("menu").addClass($(this).attr("class"));
} else {
$("#menu").removeClass();
$("#menu").addClass("menu");
}
});
});
</script>
</head>
<body>
<div class="content">
<nav>
<div id="menu" class="menu">
<div class="menu-header">CH Foods Inc.</div>
<ul>
<li class="active"><a href="#"><i class="fa fa-pencil-square-o"></i>Place Orders</a>
<ul class="submenu">
<li><a href="#"> Agent Orders</a>
</li>
<li><a href="#"> Purchase Orders</a>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-folder-open"> </i>Catalogs</a>
<ul class="submenu">
<li><a href="#"> Agents</a>
</li>
<li><a href="#"> Customers</a>
</li>
<li><a href="#"> Products</a>
</li>
<li><a href="#"> Cities</a>
</li>
<li><a href="#"> Co Brokers</a>
</li>
<li><a href="#"> Specifications</a>
</li>
<li><a href="#"> Presentations</a>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-lock"> </i>Admin Panel</a>
<ul class="submenu">
<li><a href="#"> General Configuration </a>
</li>
<li><a href="#"> GAM </a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>