hi for open default extended menu in jquery mmenu, we must add 'Selected' class like this (before open webpage)
<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>
But I want set class by jquery like this:
<span id="basket">open submenu<span>
============
var API = $("#menu").data( "mmenu" );
$("#basket").click(function() {
$("#mmbasket").addClass('Selected');
API.open();
});
'Selected' class adds o that element and also the menu opens. but the menu show root items. not extended sub menu!
how can I correct that?
答案 0 :(得分:0)
I figured you wanted the #mmbasket to toggle between Selected and not Selected.
$(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>