轉換懸停下推菜單點擊

Question

所以我在這裏發現了一些非常有用的代碼：http://codepen.io/slkav/pen/enHiI，我正在使用它來創建下推megamenu。但是，我想將該功能轉換爲單擊操作，然後關閉後續單擊，而不是像當前那樣操作懸停。我明白，點擊打開菜單與更改鼠標點擊第一個功能一樣簡單，但再次關閉它非常棘手，尤其是因爲這裏有所有這些額外的位與懸停超時等有關。任何人都可以幫助我簡化這個工作點擊？我相信這很簡單，但我太無能爲力了。任何幫助，將不勝感激。

下面的代碼，因爲它主張：

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