javascript - 需要 "menuTrigger"的 javascript 菜单帮助

Question

需要您帮助menuTrigger javascript

我正在制作菜单，首先只显示标题，但当单击菜单图标(现在是深灰色框)时，它会展开更多子菜单。

我几乎已经达到了我想要的效果，但是(卡住)我想要在单击菜单按钮打开菜单时产生淡入淡出效果或动画效果。我没有得到正确的语法来放置，请帮助我实现效果。

您可以检查链接上的代码: http://jsfiddle.net/kBpqa/1/

JS:

(function ($) {
  $(document).ready(function() {



  /* --------- Main Submenu Open/Close --------- */

  var menuOpen = false;

  // Close menu when pointer leaves expanded menu
  $('#headerContainer').mouseleave(
      function() {
        if( menuOpen == true)
          closeSubMenu();
  });

  // Open/Close menu when user clicks on trigger link
  $('.menuTrigger').click(
    function(e){
      e.preventDefault();
      if( menuOpen == true) 
        closeSubMenu();
      else
        openSubMenu();
  });

  // Opens Main Submenu
  function openSubMenu(){
    $('#mainMenu').addClass('openMenu');
    $('#mainMenu').find('ul.menu li ul').show();
    var menuHeight = $('#mainMenu').height();
    $('#header').height(menuHeight);
    $('#mainMenu').find('ul.menu li ul').delay(300).css({'opacity' : 1});
    $('#header .extIcons').show(500);
    // $('#header .extIcons a').delay(500).css({'opacity' : 1});

    // contractLogo();
    if ( $(window).width() < 1400 ) {
      $('#logo a').html('');
    };

    menuOpen = true;
  }

  // Closes Main Submenu
  function closeSubMenu(){ $('#mainMenu').removeClass('openMenu');
    $('#mainMenu').find('ul.menu li ul').css({'opacity' : 0});
    $('#mainMenu').find('ul.menu li ul').delay(500).hide();
    var menuHeight = $('#mainMenu').height();
    $('#header .extIcons').hide();
    $('#header').height(menuHeight);
    // contractLogo();
    $('#logo a').text('');

    menuOpen = false;
  }

 /* --------- END Main Submenu Open/Close --------- */



  });
}

(jQuery));;

HTML:

<div id="header">

        <div id="headerContainer">
         <div class="block block-menu-block">
         <div id="mainMenu">
              <ul class="menu">
             <li class="first expanded menu-mlid-601 menu-601"><a href="#">About Us</a>
                <ul class="menu">
                    <li class="first leaf menu-mlid-606 menu-606"><a href="#">Title1</a></li>
                    <li class="leaf menu-mlid-585 menu-585"><a href="#">Title2</a></li>
                    <li class="leaf has-children menu-mlid-1409 menu-1409"><a href="#">Title3</a></li>
                    <li class="leaf has-children menu-mlid-616 menu-616"><a href="#">Title4</a></li>

                </ul>
             </li>
            <li class="expanded active-trail active menu-mlid-1107 menu-1107"><a href="#" class="active-trail active">Work</a>
            <ul class="menu">
                    <li class="first leaf menu-mlid-1138 menu-1138"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1134 menu-1134"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1137 menu-1137"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1135 menu-1135"><a href="#" title="">Title1 </a></li>
                    <li class="leaf menu-mlid-1260 menu-1260"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1261 menu-1261"><a href="#" title="">Title1</a></li>

                </ul>   
            </li>
            <li class="expanded menu-mlid-1237 menu-1237"><a href="#">Research</a>
                <ul class="menu">
                    <li class="first leaf menu-mlid-1138 menu-1138"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1134 menu-1134"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1137 menu-1137"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1135 menu-1135"><a href="#" title="">Title1 </a></li>
                    <li class="leaf menu-mlid-1260 menu-1260"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1261 menu-1261"><a href="#" title="">Title1</a></li>

                </ul>
            </li>
            <li class="expanded menu-mlid-1103 menu-1103"><a href="#">Current Events</a>
                  <ul class="menu">
                    <li class="first leaf menu-mlid-1138 menu-1138"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1134 menu-1134"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1137 menu-1137"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1135 menu-1135"><a href="#" title="">Title1 </a></li>
                    <li class="leaf menu-mlid-1260 menu-1260"><a href="#" title="">Title1</a></li>
                    <li class="leaf menu-mlid-1261 menu-1261"><a href="#" title="">Title1</a></li>

                </ul>
                  </li>
            <li class="last expanded menu-mlid-1105 menu-1105"><a href="#">Contact</a></li>
            </ul> 

            <div class="menuTrigger"><a href="#">Menu</a></div>
         </div>

        </div>

    </div><!-- end headerContainer -->    
    </div><!-- end header -->  

CSS:

div.block-menu-block{float:right; margin-top:0px;background-color: #e7e7e7;}
#headerContainer{background-color:#e7e7e7;}
#mainMenu{margin:0;padding:0;overflow:auto;}
#mainMenu > ul{margin:0;margin-right:65px;padding:0;list-style-type:none;}
#mainMenu li{margin:0;position:relative;}
#mainMenu > ul > li > a{color:#111 !important;display:block;padding:1.6em 1em;font-weight:600; font-size:17px;}
#header a:hover{color:#111 !important;}
#mainMenu > ul > li{float:left;}
div.menuTrigger{padding:.8em 1em 0 0;margin:0;float:right;background:#ccc}
.menuTrigger a{width:40px;height:40px;text-indent:9999em;display:block;overflow:hidden;margin-top:6px;background:url(../images/menu-trigger.png) no-repeat;}
.menuTrigger a:hover{background-position:0 -40px;}
#mainMenu > ul > li > ul{margin:0 3em 3em 1.5em !important;padding:0;display:none; font-size:13px; line-height:1.2em;}
#mainMenu > ul > li > ul > li{max-width:9em;padding:.4em 0;font-size:1em !important;display:block;}

#menu .first leaf menu-mlid-606 menu-606 a{ font-size:14px;}
#mainMenu > ul > li > ul > li > a{font-weight:normal;color:#999 !important;}
li.current{background:#222222;float:left;}

Answer 1

您可以使用 slideDown() 或 slideUp() 代替 hide() 函数。你可以使用 fadeIn()而不是 .dealy(500).css({opacity:1}) 。为了让你的动画更流畅，你可以easing在 jquery 中用于大多数功能。

已更新 fiddle