手風琴菜單如何使所有類別擴展？ -JQuery Accordeon菜單

Question

我有一個手風琴jquery菜單，默認情況下，它通過單擊類別將其展開並顯示子菜單來工作。 但是現在我需要菜單顯示所有類別，並且子菜單一直擴展（我不再需要“折疊”功能），我只想保留基本菜單的樣式和一些效果。

這是代碼：

 (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 ai { 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> 

Answer 1

我知道了，我只是刪除了jquery.js文件和html上的引用，並從Style.css中刪除了以下代碼：

 .menu ul .submenu { display: none; position: static; width: 100%; }