호버 다운 메뉴를 클릭하여 변환

Question

그래서 여기에 매우 유용한 코드가 있습니다 : http://codepen.io/slkav/pen/enHiI 푸시 다운 메가 메뉴를 만들기 위해 사용하고 있습니다. 그러나, 나는 현재와 마찬가지로 호버에서 작동하는 것이 아니라 클릭으로 작업하고 후속 클릭으로 닫는 기능으로 변환하고 싶습니다. 나는 클릭 할 때 메뉴를 열면 마우스 기능을 클릭하여 첫 번째 함수를 클릭하는 것처럼 간단하지만 다시 닫기는 까다 롭다. 특히 마우스 오버 타임과 관련하여 이러한 모든 추가 비트가 있기 때문에 특히주의해야한다. 아무도 나를 클릭 할 때이 작업을 간소화 할 수 있습니까? 나는 그것이 정말로 간단하다고 확신하지만 나는 그것을 이해하기에는 너무나 익숙하지 않다. 어떤 도움을 주시면 감사하겠습니다. 이 약자로

여기에 코드입니다 :

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