Question

所以我在这里找到了一些非常有用的代码：http://codepen.io/slkav/pen/enHiI我用它来创建一个下推megamenu。但是，我希望将该功能转换为点击工作，并在后续点击时关闭，而不是像当前一样操作鼠标悬停。我知道单击打开菜单就像在第一个函数中更改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);
});*/

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

1 个答案: