将悬停下推菜单转换为单击

Question

所以我在这里找到了一些非常有用的代码：http://codepen.io/slkav/pen/enHiI 我用它来创建下推式超级菜单。但是，我想将该功能转换为在点击时起作用，并在随后的点击时关闭，而不是像目前那样在悬停时操作。我知道点击打开菜单就像在第一个功能中将 mouseenter 更改为点击一样简单，但再次关闭它很棘手，特别是因为那里有所有这些与悬停超时等相关的额外位。任何人都可以帮助我简化此操作以在点击时工作吗？我敢肯定这真的很简单，但我太无能了，无法弄清楚。任何帮助将不胜感激。

这是目前的代码：

// Megamenu push-down
// On li.main hover:
// 1. Give it 200 milliseconds before doing anything
// 2. Check if another megamenu is already visible (the user is quickly going from link to link). If so, show the content of the new megamenu without any slide animation and hide the previous one. If no megamenu is currently visible and the hovered li.main has a megamenu, slide it down

var $siteheader = $('#siteheader');
var $megamenu = $siteheader.find('nav li .megamenu');
var $pagecontent = $('#pagecontent');
var is_show = true;

// initiate timeout variables
hoverTimeout = "";
leaveTimeout = "";
$siteheader.find('nav li.main').click(function() {
    var $thisMegamenu = $(this).find('.megamenu')
    // stop any leaveTimeouts if they were triggered through guick back-and-forth hovering
    clearTimeout(leaveTimeout);
    // 1.
    hoverTimeout = setTimeout(function() {
      // 2. Another megamenu already open?
      if( $megamenu.is(':visible') ) {
        // if new hovered li has megamenu, hide old menu and show the new, otherwise slide everything back up
        if( $thisMegamenu.length ) {
          // stop any other hoverTimeouts triggered through guick back-and-forth hovering
          clearTimeout(hoverTimeout); 
          $megamenu.filter(':visible').stop(true, true).hide();
          $thisMegamenu.stop(true, true).show();
        } else {
          $megamenu.filter(':visible').stop(true, true).slideUp(500);
          $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500);
        }
      } else {
        if( $thisMegamenu.length ) {
          // stop any other hoverTimeouts triggered through guick back-and-forth hovering
          clearTimeout(hoverTimeout); 
          $thisMegamenu.stop(true, true).slideDown(500);
          /* 16.5em is the set height of the megamenu + negative margin of nav ul */
          $pagecontent.stop(true, true).animate({ paddingTop: '13em'}, 500);
        }
      }
    }, 200);
});
    // Leaving li item (if another li is hovered over quickly after, this is cleared)
$siteheader.find('nav li.main').mouseleave(function() {
  clearTimeout(hoverTimeout);
  leaveTimeout = setTimeout(function() {
    if( $megamenu.is(':visible') ) {
      $megamenu.filter(':visible').stop(true, true).slideUp(500);
      $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500);
    }
  }, 200);
});

Answer 1

如果您要点击一下，则不需要任何 setTimeout。我已经在文件中进行了更改。见下文。

// Megamenu push-down
// On li.main hover:
// 1. Give it 200 milliseconds before doing anything
// 2. Check if another megamenu is already visible (the user is quickly going from link to link). If so, show the content of the new megamenu without any slide animation and hide the previous one. If no megamenu is currently visible and the hovered li.main has a megamenu, slide it down

var $siteheader = $('#siteheader');
var $megamenu = $siteheader.find('nav li .megamenu');
var $pagecontent = $('#pagecontent');
var is_show = true;

// initiate timeout variables
hoverTimeout = "";
leaveTimeout = "";
$siteheader.find('nav li.main').click(function() {
    var $thisMegamenu = $(this).find('.megamenu')
    // stop any leaveTimeouts if they were triggered through guick back-and-forth hovering
    /*clearTimeout(leaveTimeout);
  */
    // 1.
    /*hoverTimeout = setTimeout(function() {*/
      // 2. Another megamenu already open?
      if( $megamenu.is(':visible') ) {
        // if new hovered li has megamenu, hide old menu and show the new, otherwise slide everything back up
        console.log($thisMegamenu.length);
        if( $thisMegamenu.length ) {
          console.log("in here")
          // stop any other hoverTimeouts triggered through guick back-and-forth hovering
         /* clearTimeout(hoverTimeout); */
          $megamenu.filter(':visible').stop(true, true).slideUp(500);
          $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500);
        } else {
          console.log("over here")
          $megamenu.filter(':visible').stop(true, true).slideUp(500);
          $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500);
        }
      } else {
        if( $thisMegamenu.length ) {
          // stop any other hoverTimeouts triggered through guick back-and-forth hovering
         /* clearTimeout(hoverTimeout); */
          $thisMegamenu.stop(true, true).slideDown(500);
          /* 16.5em is the set height of the megamenu + negative margin of nav ul */
          $pagecontent.stop(true, true).animate({ paddingTop: '13em'}, 500);
        }
      }
/*    }, 200);*/
});
    // Leaving li item (if another li is hovered over quickly after, this is cleared)
/*$siteheader.find('nav li.main').mouseleave(function() {
  clearTimeout(hoverTimeout);
  leaveTimeout = setTimeout(function() {
    if( $megamenu.is(':visible') ) {
      $megamenu.filter(':visible').stop(true, true).slideUp(500);
      $pagecontent.stop(true, true).animate({ paddingTop: '0'}, 500);
    }
  }, 200);
});*/

将悬停下推菜单转换为单击

Converting a hover push down menu to click

javascript

jquery

hover

megamenu