Question

我正在编写一个带有两个多级下拉菜单的设置页面。第一个菜单是网站主菜单，位于页面顶部，第二个菜单位于页面下方，用于导航设置功能，例如更改头像，时区，电子邮件地址等。

如果页面上只有一个菜单，那就没有问题。我希望使用相同的菜单进行设置，以使页面外观保持一致。我遇到的问题是让它们分别表现。打开一个菜单，打开另一个菜单，两个菜单的移动菜单重复。

起初，我以为我可以简单地将jQuery函数中的.find()命令切换为.closest()，然后尝试.next()，但它们都不起作用。我复制了该函数并更改了所有变量以使其成为一个单独的函数，但这导致下层菜单完全停止工作。

我尝试为每个菜单指定单独的ID，并在jQuery(document).ready(function($)中尝试分别对其进行初始化，但这也没有用。

在线搜索发现了其他菜单类型的所有示例，但是我找不到任何可以帮助我解决此问题的方法。这完全超出了我的经验。

下面的代码将两个菜单作为一个菜单运行。这是我过去两天的出发点。

HTML

<div class="stellarnav" id="stellar1">
  <ul>
    <li><a href="" onclick="return false;">Link 1</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 2</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 3</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
  </ul>
</div>
<div class="stellarnav" id="stellar2">
  <ul>
    <li><a href="" onclick="return false;">Link 1</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 2</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 3</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    jQuery('.stellarnav').stellarNav({
      theme: 'dark',
      breakpoint: 960
    });
  });

</script>

CSS

.stellarnav {
  position: relative;
  width: 100%;
  z-index: 9900;
  line-height: normal;
  display: none;
  margin-bottom: 20px;
}

.stellarnav a {
  color: #777;
}

.stellarnav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.stellarnav li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
  vertical-align: middle;
}

.stellarnav li a {
  padding: 15px;
  display: block;
  text-decoration: none;
  color: #777;
  font-size: inherit;
  font-family: inherit;
  box-sizing: border-box;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

/* main level */

.stellarnav>ul>li {
  display: inline-block;
}

.stellarnav>ul>li>a {
  padding: 20px 40px;
}

/* first level dd */

.stellarnav ul ul {
  top: auto;
  width: 220px;
  position: absolute;
  z-index: 9900;
  text-align: left;
  display: none;
  background: #ddd;
}

.stellarnav li li {
  display: block;
}

/* second level dd */

.stellarnav ul ul ul {
  top: 0;
  /* dd animtion - change to auto to remove */
  left: 220px;
}

.stellarnav>ul>li:hover>ul>li:hover>ul {
  opacity: 1;
  visibility: visible;
  top: 0;
}

/* .drop-left */

.stellarnav>ul>li.drop-left>ul {
  right: 0;
}

.stellarnav li.drop-left ul ul {
  left: auto;
  right: 220px;
}

/* light theme */

.stellarnav.light {
  background: rgba(255, 255, 255, 1);
}

.stellarnav.light a {
  color: #000;
}

.stellarnav.light ul ul {
  background: rgba(255, 255, 255, 1);
}

.stellarnav.light li a {
  color: #000;
}

/* dark theme */

.stellarnav.dark {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0px 15px rgba(128, 128, 128, 0.35);
}

.stellarnav.dark a {
  color: #538fbe;
}

.stellarnav.dark ul ul {
  background: #f9f9f9;
  border: 1px solid #f1f1f1;
}

.stellarnav.dark li a {
  color: #5b8daf;
}

.stellarnav.dark li a:hover {
  color: #5b8daf;
  background: rgba(16, 16, 16, 0.1);
}

/* sticky nav */

.stellarnav.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* only used when 'scrollbarFix' is set to true in the js. This fixes horizontal scrollbar caused by the dd menus that are very long.*/

body.stellarnav-noscroll-x {
  overflow-x: hidden;
}

/* general styling */

.stellarnav li.has-sub>a:after {
  content: '';
  margin-left: 10px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5b8daf;
  display: inline-block;
}

.stellarnav li li.has-sub>a:after {
  margin-left: 10px;
  float: right;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #5b8daf;
  position: relative;
  top: 4px;
}

.stellarnav li.drop-left li.has-sub>a:after {
  float: left;
  margin-right: 10px;
  border-left: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #5b8daf;
}

.stellarnav.hide-arrows li.has-sub>a:after,
.stellarnav.hide-arrows li li.has-sub>a:after,
.stellarnav.hide-arrows li.drop-left li.has-sub>a:after {
  display: none;
}

.stellarnav .menu-toggle,
.stellarnav .close-menu,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile {
  display: none;
  text-transform: uppercase;
  text-decoration: none;
}

.stellarnav .dd-toggle {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  text-align: center;
  z-index: 9999;
  border: 0;
}

.stellarnav.desktop li.has-sub a {
  padding-right: 5px;
}

.stellarnav.desktop.hide-arrows li.has-sub a {
  padding-right: 15px;
}

.stellarnav.mobile>ul>li>a.dd-toggle {
  padding: 0;
}

.stellarnav li.call-btn-mobile,
.stellarnav li.location-btn-mobile {
  display: none;
}

/* svg icons */

.stellarnav svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  position: relative;
  top: 2px;
}

/* svg icons */

.stellarnav a.dd-toggle .icon-plus {
  box-sizing: border-box;
  transition: transform 0.3s;
  width: 12px;
  height: 100%;
  position: relative;
  vertical-align: middle;
  display: inline-block;
}

.stellarnav a.dd-toggle .icon-plus:before {
  content: '';
  display: block;
  width: 12px;
  height: 0px;
  border-bottom: solid 3px #777;
  position: absolute;
  top: 50%;
  transform: rotate(90deg);
  transition: width 0.3s;
}

.stellarnav a.dd-toggle .icon-plus:after {
  content: '';
  display: block;
  width: 12px;
  height: 0px;
  top: 50%;
  border-bottom: solid 3px #777;
  position: absolute;
}

.stellarnav li.open>a.dd-toggle .icon-plus {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.stellarnav.light a.dd-toggle .icon-plus:before {
  border-color: #000;
}

.stellarnav.light a.dd-toggle .icon-plus:after {
  border-color: #000;
}

.stellarnav.dark a.dd-toggle .icon-plus:before {
  border-color: #FFF;
}

.stellarnav.dark a.dd-toggle .icon-plus:after {
  border-color: #FFF;
}

.stellarnav .icon-close {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  position: relative;
  display: inline-block;
}

.stellarnav .icon-close:before {
  content: '';
  display: block;
  width: 12px;
  height: 0px;
  border-bottom: solid 3px #777;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
}

.stellarnav .icon-close:after {
  content: '';
  display: block;
  width: 12px;
  height: 0px;
  top: 50%;
  border-bottom: solid 3px #777;
  position: absolute;
  transform: rotate(-45deg);
}

.stellarnav.light .icon-close:before {
  border-color: #000;
}

.stellarnav.light .icon-close:after {
  border-color: #000;
}

.stellarnav.dark .icon-close:before {
  border-color: #FFF;
}

.stellarnav.dark .icon-close:after {
  border-color: #FFF;
}

/* mobile nav */

.stellarnav .menu-toggle,
.stellarnav .call-btn-mobile,
.stellarnav .location-btn-mobile,
.stellarnav .close-menu {
  padding: 15px;
  box-sizing: border-box;
}

.stellarnav .menu-toggle span.bars {
  display: inline-block;
  margin-right: 7px;
  position: relative;
  top: 3px;
}

.stellarnav .menu-toggle span.bars span {
  display: block;
  width: 15px;
  height: 2px;
  border-radius: 6px;
  background: #777;
  margin: 0 0 3px;
}

.stellarnav .full {
  width: 100%;
}

.stellarnav .half {
  width: 50%;
}

.stellarnav .third {
  width: 33%;
  text-align: center;
}

.stellarnav .location-btn-mobile.third {
  text-align: center;
}

.stellarnav .location-btn-mobile.half {
  text-align: right;
}

.stellarnav.light .third,
.stellarnav.light .half {
  border-left: 1px solid rgba(0, 0, 0, .15);
}

.stellarnav.light.left .third,
.stellarnav.light.left .half {
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.stellarnav.light.right .third,
.stellarnav.light.right .half {
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.stellarnav.light .third:first-child,
.stellarnav.light .half:first-child {
  border-left: 0;
}

.stellarnav.dark .third,
.stellarnav.dark .half {
  border-left: 1px solid rgba(255, 255, 255, .15);
}

.stellarnav.dark.left .third,
.stellarnav.dark.left .half {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.stellarnav.dark.right .third,
.stellarnav.dark.right .half {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.stellarnav.light.left .menu-toggle,
.stellarnav.light.right .menu-toggle {
  border-bottom: 0;
}

.stellarnav.dark.left .menu-toggle,
.stellarnav.dark.right .menu-toggle {
  border-bottom: 0;
}

.stellarnav.dark .third:first-child,
.stellarnav.dark .half:first-child {
  border-left: 0;
}

.stellarnav.light .menu-toggle span.bars span {
  background: #000;
}

.stellarnav.dark .menu-toggle span.bars span {
  background: #538fbe;
}

.stellarnav.mobile {
  position: static;
}

.stellarnav.mobile.fixed {
  position: static;
}

.stellarnav.mobile ul {
  position: relative;
  display: none;
}

.stellarnav.mobile.active {
  padding-bottom: 0;
}

.stellarnav.mobile.active>ul {
  display: block;
}

.stellarnav.mobile ul {
  text-align: left;
}

.stellarnav.mobile>ul>li {
  display: block;
}

.stellarnav.mobile>ul>li>a {
  padding: 15px;
}

.stellarnav.mobile ul {
  background: rgba(221, 221, 221, 1);
}

.stellarnav.mobile ul ul {
  position: relative;
  opacity: 1;
  visibility: visible;
  width: auto;
  display: none;
  -moz-transition: none;
  -webkit-transition: none;
  -o-transition: color 0 ease-in;
  transition: none;
}

.stellarnav.mobile ul ul ul {
  left: auto;
  top: auto;
}

.stellarnav.mobile li.drop-left ul ul {
  right: auto;
}

.stellarnav.mobile li a {
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.stellarnav.mobile>ul {
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.stellarnav.mobile.light li a {
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.stellarnav.mobile.light>ul {
  border-top: 1px solid rgba(0, 0, 0, .15);
}

.stellarnav.mobile li a.dd-toggle {
  border: 0;
}

.stellarnav.mobile.light li a.dd-toggle {
  border: 0;
}

.stellarnav.mobile .menu-toggle,
.stellarnav.mobile .dd-toggle,
.stellarnav.mobile .close-menu,
.stellarnav.mobile .call-btn-mobile,
.stellarnav.mobile .location-btn-mobile {
  display: inline-block;
}

.stellarnav.mobile li.call-btn-mobile {
  border-right: 1px solid rgba(255, 255, 255, .1);
  box-sizing: border-box;
}

.stellarnav.mobile li.call-btn-mobile,
.stellarnav.mobile li.location-btn-mobile {
  display: inline-block;
  width: 50%;
  text-transform: uppercase;
  text-align: center;
}

.stellarnav.mobile li.call-btn-mobile.full,
.stellarnav.mobile li.location-btn-mobile.full {
  display: block;
  width: 100%;
  text-transform: uppercase;
  border-right: 0;
  text-align: left;
}

.stellarnav.mobile.light ul {
  background: rgba(255, 255, 255, 1);
}

.stellarnav.mobile.dark ul {
  background: rgba(0, 0, 0, 1);
}

.stellarnav.mobile.dark ul ul {
  background: rgba(255, 255, 255, .08);
}

.stellarnav.mobile.light li.call-btn-mobile {
  border-right: 1px solid rgba(0, 0, 0, .1);
}

.stellarnav.mobile.top {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
}

.stellarnav.mobile li.has-sub>a:after,
.stellarnav.mobile li li.has-sub>a:after,
.stellarnav.mobile li.drop-left li.has-sub>a:after {
  display: none;
}

/* left and right positions */

.stellarnav.mobile.right>ul,
.stellarnav.mobile.left>ul {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.stellarnav.mobile.right>ul {
  right: 0;
}

.stellarnav.mobile.right .close-menu,
.stellarnav.mobile.left .close-menu {
  display: inline-block;
  text-align: right;
}

.stellarnav.mobile.left>ul {
  left: 0;
}

.stellarnav.mobile.right .location-btn-mobile.half,
.stellarnav.mobile.right .call-btn-mobile.half,
.stellarnav.mobile.right .close-menu.half {
  text-align: center;
}

.stellarnav.mobile.right .location-btn-mobile.third,
.stellarnav.mobile.right .call-btn-mobile.third,
.stellarnav.mobile.right .close-menu.third {
  text-align: center;
}

.stellarnav.mobile.left .location-btn-mobile.half,
.stellarnav.mobile.left .call-btn-mobile.half,
.stellarnav.mobile.left .close-menu.half {
  text-align: center;
}

.stellarnav.mobile.left .location-btn-mobile.third,
.stellarnav.mobile.left .call-btn-mobile.third,
.stellarnav.mobile.left .close-menu.third {
  text-align: center;
}

.stellarnav.mobile.left .menu-toggle.half,
.stellarnav.mobile.left .menu-toggle.third,
.stellarnav.mobile.right .menu-toggle.half,
.stellarnav.mobile.right .menu-toggle.third {
  text-align: left;
}

.stellarnav.mobile.left .close-menu.third span,
.stellarnav.mobile.right .close-menu.third span {
  display: none;
}

/* left and right positions */

/* mega dd */

.stellarnav.desktop li.mega ul ul {
  background: none;
}

.stellarnav.desktop li.mega li {
  display: inline-block;
  vertical-align: top;
  margin-left: -4px;
}

.stellarnav.desktop li.mega li li {
  display: block;
  position: relative;
  left: 4px;
}

.stellarnav.desktop li.mega ul ul {
  width: auto;
}

.stellarnav.desktop>ul>li.mega {
  position: inherit;
}

.stellarnav.desktop>ul>li.mega>ul {
  width: 100%;
}

.stellarnav.desktop>ul>li.mega>ul li.has-sub ul {
  display: block;
  position: relative;
  left: auto;
}

.stellarnav.desktop>ul>li.mega>ul>li {
  padding-bottom: 15px;
  box-sizing: border-box;
}

.stellarnav.desktop li.mega li li a {
  padding: 5px 15px;
}

.stellarnav.desktop li.mega li.has-sub a:after {
  display: none;
}

.stellarnav.desktop>ul>li.mega>ul>li>a {
  color: yellow;
}

/* mega dd */

/* Fallback for slow javascript load */

@media only screen and (max-width: 768px) {
  .stellarnav {
    overflow: hidden;
    display: block;
  }
  .stellarnav ul {
    position: relative;
    display: none;
  }
  .patrons {
    position: relative;
    top: 60px;
  }
  #separate_topic_container {
    position: relative;
    top: 60px;
  }
}

/* mobile nav */

@media only screen and (max-width: 420px) {
  .stellarnav.mobile .call-btn-mobile.third span,
  .stellarnav.mobile .location-btn-mobile.third span {
    display: none;
  }
}

jQuery

! function(u) {
  u.fn.stellarNav = function(n, r, h) {
    nav = u(this), r = u(window).width();
    var f = u.extend({
      theme: "plain",
      breakpoint: 768,
      menuLabel: "Menu",
      sticky: !1,
      position: "static",
      openingSpeed: 250,
      closingDelay: 250,
      showArrows: !0,
      phoneBtn: "",
      phoneLabel: "Call Us",
      locationBtn: "",
      locationLabel: "Location",
      closeBtn: !1,
      closeLabel: "Close",
      mobileMode: !1,
      scrollbarFix: !1
    }, n);
    return this.each(function() {
      if ("light" != f.theme && "dark" != f.theme || nav.addClass(f.theme), f.breakpoint && (h = f.breakpoint), f.menuLabel ? menuLabel = f.menuLabel : menuLabel = "", f.phoneLabel ? phoneLabel = f.phoneLabel : phoneLabel = "", f.locationLabel ? locationLabel = f.locationLabel : locationLabel = "", f.closeLabel ? closeLabel = f.closeLabel : closeLabel = "", f.phoneBtn && f.locationBtn) var n = "third";
      else if (f.phoneBtn || f.locationBtn) n = "half";
      else n = "full";
      if ("right" == f.position || "left" == f.position ? nav.prepend() : nav.prepend('<a href="#" class="menu-toggle ' + n + '"><span class="bars"><span></span><span></span><span></span></span> ' + menuLabel + "</a>")) {}
      u(".menu-toggle, .stellarnav-open").on("click", function(n) {
        n.preventDefault(), "left" == f.position || "right" == f.position ? (nav.find("ul:first").stop(!0, !0).fadeToggle(f.openingSpeed), nav.toggleClass("active"), nav.hasClass("active") && nav.hasClass("mobile") && u(document).on("click", function(n) {
          nav.hasClass("mobile") && (u(n.target).closest(nav).length || (nav.find("ul:first").stop(!0, !0).fadeOut(f.openingSpeed), nav.removeClass("active")))
        })) : (nav.find("ul:first").stop(!0, !0).slideToggle(f.openingSpeed), nav.toggleClass("active"))
      }), u(".close-menu, .stellarnav-close").on("click", function() {
        nav.removeClass("active"), "left" == f.position || "right" == f.position ? nav.find("ul:first").stop(!0, !0).fadeToggle(f.openingSpeed) : nav.find("ul:first").stop(!0, !0).slideUp(f.openingSpeed).toggleClass("active")
      }), nav.find("li a").each(function() {
        0 < u(this).next().length && u(this).parent("li").addClass("has-sub").append('<a class="dd-toggle" href="#"><span class="icon-plus"></span></a>')
      }), nav.find("li .dd-toggle").on("click", function(n) {
        n.preventDefault(), u(this).parent("li").children("ul").stop(!0, !0).slideToggle(f.openingSpeed), u(this).parent("li").toggleClass("open")
      });
      var c = function() {
        nav.find("li").off("mouseenter"), nav.find("li").off("mouseleave")
      };
      parentItems = nav.find("> ul > li");

      function p() {
        window.innerWidth <= h || f.mobileMode ? (c(), nav.addClass("mobile"), nav.removeClass("desktop"), !nav.hasClass("active") && nav.find("ul:first").is(":visible") && nav.find("ul:first").hide(), nav.find("li.mega").each(function() {
          u(this).find("ul").first().removeAttr("style"), u(this).find("ul").first().children().removeAttr("style")
        })) : (nav.addClass("desktop"), nav.removeClass("mobile"), nav.hasClass("active") && nav.removeClass("active"), !nav.hasClass("active") && nav.find("ul:first").is(":hidden") && nav.find("ul:first").show(), u("li.open").removeClass("open").find("ul:visible").hide(), c(), u(parentItems).each(function() {
          u(this).hasClass("mega") ? (u(this).on("mouseenter", function() {
            u(this).find("ul").first().stop(!0, !0).slideDown(f.openingSpeed)
          }), u(this).on("mouseleave", function() {
            u(this).find("ul").first().stop(!0, !0).slideUp(f.openingSpeed)
          })) : (u(this).on("mouseenter", function() {
            u(this).children("ul").stop(!0, !0).slideDown(f.openingSpeed)
          }), u(this).on("mouseleave", function() {
            u(this).children("ul").stop(!0, !0).delay(f.closingDelay).slideUp(f.openingSpeed)
          }), u(this).find("li.has-sub").on("mouseenter", function() {
            u(this).children("ul").stop(!0, !0).slideDown(f.openingSpeed)
          }), u(this).find("li.has-sub").on("mouseleave", function() {
            u(this).children("ul").stop(!0, !0).delay(f.closingDelay).slideUp(f.openingSpeed)
          }))
        }), navWidth = 0, u(parentItems).each(function() {
          navWidth += u(this)[0].getBoundingClientRect().width, navWidth = Math.round(navWidth), u(this).hasClass("mega") && (u(this).find("ul").first().css({
            left: 0,
            right: 0,
            margin: "0px auto"
          }), numCols = u(this).attr("data-columns"), 2 == numCols ? u(this).find("li.has-sub").width("50%") : 3 == numCols ? u(this).find("ul").first().children().width("33.33%") : 4 == numCols ? u(this).find("ul").first().children().width("25%") : 5 == numCols ? u(this).find("ul").first().children().width("20%") : 6 == numCols ? u(this).find("ul").first().children().width("16.66%") : 7 == numCols ? u(this).find("ul").first().children().width("14.28%") : 8 == numCols ? u(this).find("ul").first().children().width("12.5%") : u(this).find("ul").first().children().width("25%"))
        }), parentItems.hasClass("mega") && nav.find("li.mega > ul").css({
          "max-width": navWidth
        }))
      }
      p(), u(window).on("resize", function() {
        p()
      })
    })
  }
}(jQuery);

我希望该功能将每个菜单分开对待，以使每个菜单独立做出反应。

Answer 1

统一的代码似乎在单个变量var nav = u(this);下引用了两个nav元素

您可以尝试为每个元素调用stellarNav吗？像这样：

function initializeStellarNav(index, element) {
    $(element).stellarNav({
        theme: 'dark',
        breakpoint: 960
    });
}

jQuery(document).ready(function($) {
    var $navs = jQuery('.stellarnav');
    $navs.each(initializeStellarNav);
});

Answer 2

要解决使两个单独的菜单在同一页面上分别起作用的问题，我无法仅通过使用一个功能来完成此操作。我需要复制该函数并通过在第二个函数中的每个变量上简单地添加一个“ 2”来更改所有变量名。使用同一功能分别初始化它们会导致顶部菜单停止工作，因为该功能随后仅将其分配给了较低菜单。

这是一个响应式菜单，在移动模式下，每个移动菜单按钮只能操作第二个菜单。第二个菜单功能中的按钮需要更改其ID。因此class =“。menu-toggle”变成了class =“。menu-toggle2”。还需要修改CSS，使其包含.menu-toggle2。

初始化需要单独进行，但现在可以使用了。在同一页面上需要两个相同的响应菜单的情况很少见，但是当您这样做时，此解决方案就可以解决问题。

最终标记

<div class="stellarnav" id="stellar1" style="z-index:10000;">
  <ul>
    <li><a href="" onclick="return false;">Link 1</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 2</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 3</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
  </ul>
</div>
<br /><br />
<div class="stellarnav" id="stellar2">
  <ul>
    <li><a href="" onclick="return false;">Link 1</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 2</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
    <li><a href="" onclick="return false;">Link 3</a>
      <ul>
        <li><a href="" onclick="return false;">Link 1</a></li>
        <li><a href="" onclick="return false;">Link 2</a></li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
  function initializeStellarNav(index, element) {
    $(element).stellarNav({
      theme: 'dark',
      breakpoint: 960
    });
  }
  function initializeStellarNav2(index, element) {
    $(element).stellarNav2({
      theme2: 'dark',
      breakpoint2: 960
    });
  }
</script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    initializeStellarNav(1, '#stellar1');
    initializeStellarNav2(2, '#stellar2');
  });
</script>

工作小提琴

https://jsfiddle.net/Assorro/oeLwvf4m/

GitHub问题

https://github.com/vinnymoreira/stellarnav/issues/20

原始来源

https://github.com/vinnymoreira/stellarnav

重新编写jQuery函数，以在同一页面上处理两个多级下拉菜单

2 个答案: