我正在尝试将多级菜单设为mmenu.jquery。为什么链接不处理事件以及为什么菜单没有进入下一级别?我的错是什么?我究竟做错了什么?............................................ .................................................. ...................................
var menuWrap = $('nav');
var rootMenu = $('.menu ul');
var currentMenu;
function setMenu(menu)
{
var level = menu.parents('ul').length;
menu.show();
menuWrap.css('height', menu.height());
rootMenu.css('left', -100 * level + '%');
currentMenu = menu;
rootMenu.one('transitionend', function(){
menu.find('ul').hide();
});
}
$('.menu a').click(function(e) {
e.preventDefault();
$(this).siblings('ul');
});
html, body {
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
a {
display: inline-block;
vertical-align: top;
text-decoration: none;
font-size: 20px;
color: #fff;
background-color: #4588ca;
width: 100%;
padding: 0 20px;
}
nav {
width: 500px;
position: relative;
margin: 10px;
background-color: #324b5c;
}
nav ul {
list-style: none;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
position: relative;
left: 0;
top: 0;
width: 100%;
}
nav ul ul {
display: none;
position: absolute;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav role="navigation">
<ul class="menu">
<li>
<a href="">Cataloge</a>
<ul class="menu">
<li>
<a href="#">Electrical goods</a>
<ul class="menu">
<li>
<a href="#">Drill</a>
</li>
<li>
<a href="#">Screwdriver</a>
</li>
<li>
<a href="#">Hammer</a>
</li>
</ul>
</li>
<li>
<a href="#">Mixer</a>
</li>
<li>
<a href="#">Bathrooms</a>
</li>
</ul>
</li>
<li>
<a href="#">Anonses</a>
<ul class="menu i-dropdown-content">
<li>
<a href="#">Anons 1</a>
</li>
<li>
<a href="#">Anons 2</a>
</li>
<li>
<a href="#">Anons 3</a>
</li>
</ul>
</li>
<li>
<a href="#">More</a>
</li>
<li>
<a href="#">Contacts</a>
</li>
</ul>
</nav>