javascript - Accordion 菜单如何使所有类别都展开？ - JQuery Accordion 菜单

Question

我有一个 Accordion 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 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>

Answer 1

我想通了，我刚刚删除了 jquery.js 文件和 html 上的引用，并从 Style.css 中删除了这段代码:

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