滑动多级菜单

时间:2018-04-10 15:07:23

标签: javascript jquery

我正在尝试将多级菜单设为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>

0 个答案:

没有答案