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

所以我在这里找到了一些非常有用的代码：我正在使用这些代码创建一个下推菜单。但是，我希望将该函数转换为在单击时工作，并在后续单击时关闭，而不是像当前那样在悬停时操作。我知道在单击时打开菜单就像在第一个函数中将鼠标指针更改为单击一样简单，但是再次关闭它很棘手，特别是因为其中有所有这些与悬停超时等相关的额外位。有人能帮我简化一下这个程序吗？我相信这确实很简单，但我实在太无能了，弄不明白。任何帮助都将不胜感激

以下是目前的代码：

// 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);
});

---

如果你想要点击，那么你不需要任何设置超时。我已经在文件中做了更改。见下文

// 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);
});*/