在 mmenu 中通过 jQuery 添加选定的类

Question

您好，在 jquery mmenu 中打开默认扩展菜单，我们必须像这样添加 'Selected' 类（在打开网页之前）

<nav id="menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li id="mmbasket" class="Selected"><a>About us</a>
         <ul>
            <li><a href="/about/history">History</a></li>
            <li><a href="/about/team">The team</a></li>
            <li><a href="/about/address">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact">Contact</a></li>
   </ul>
</nav>

但我想通过 jquery 设置类，如下所示：

<span id="basket">open submenu<span>

============

var API = $("#menu").data( "mmenu" );

      $("#basket").click(function() {
          $("#mmbasket").addClass('Selected');
         API.open();         
      });

'Selected' 类添加该元素并且菜单也会打开。但菜单显示根项目。没有扩展子菜单！

我该如何纠正？

Answer 1

我认为您希望 #mmbasket 在已选择和未选择之间切换。

$(function() {
      $("#menu")
        .mmenu({
          extensions: ["theme-dark", "effect-listitems-slide"],
          iconPanels: {
            add: true,
            visible: 1,
            selected: true
          },
          navbar: {
            add: false
          },
          counters: true
        }).on('click',
          'a[href^="#/"]',
          function() {
            alert("It worx and I'm selected");
            return false;
          }
        );

.Selected {
  border: 3px solid red;
}
#basket {
  border: 1px solid blue;
  color: #FFF;
  background: #333;
}
dd {
  border: 1px solid blue;
}
dt {
  border: 1px solid black;
  color: black;
}

<link href="https://mmenu.frebsite.nl/mmenu/core/css/jquery.mmenu.all.css?v=5.4.4" rel="stylesheets" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.js"></script>

<nav id="menu" class="mm-menu mm-theme-dark mm-effect-listitems-slide mm-offcanvas mm-iconpanel">
  <div class="mm-panels">
    <div class="mm-panel mm-opened mm-current mm-iconpanel-0" id="mm-0">
      <a href="#mm-0" class="mm-subblocker"></a>
      <div class="mm-navbar"><a class="mm-title">Menu</a>
      </div>
      <ul class="mm-listview">
        <li><a href="#/">Home</a>
        </li>
        <li><em class="mm-counter">3</em>
          <a class="mm-next" href="#mm-1" data-target="#mm-1"></a><a href="#/about">About us</a>

        </li>
        <li><a href="#/contact">Contact</a>
        </li>
      </ul>
    </div>
    <div class="mm-panel mm-hidden" id="mm-1">
      <a href="#mm-1" class="mm-subblocker"></a>
      <div class="mm-navbar">
        <a class="mm-btn mm-prev" href="#mm-0" data-target="#mm-0"></a><a class="mm-title" href="#mm-0">About us</a>
      </div>
      <ul class="mm-listview">
        <li><a href="#/about/history">History</a>
        </li>
        <li><em class="mm-counter">3</em>
          <a class="mm-next" href="#mm-2" data-target="#mm-2"></a><a href="#/about/team">The team</a>

        </li>
        <li><a href="#/about/address">Our address</a>
        </li>
      </ul>
    </div>
    <div class="mm-panel mm-hidden" id="mm-2">
      <a href="#mm-2" class="mm-subblocker"></a>
      <div class="mm-navbar">
        <a class="mm-btn mm-prev" href="#mm-1" data-target="#mm-1"></a><a class="mm-title" href="#mm-1">The team</a>
      </div>
      <ul class="mm-listview">
        <li><a href="#/about/team/management">Management</a>
        </li>
        <li><a href="#/about/team/sales">Sales</a>
        </li>
        <li><a href="#/about/team/development">Development</a>
        </li>
      </ul>
    </div>
  </div>
</nav>