다른 요소를 클릭했을 때의 리셋 기능

Question

클릭하면 드롭 다운 메뉴가 표시되고 두 번째 클릭하면 해당 URL로 이동하는 탐색 기능이 있습니다. 내비게이션의 다른 링크를 클릭 할 때 기능을 취소하는 방법을 알아낼 수 없습니다. 제 문제는 첫 번째 링크를 클릭하여 드롭 다운을 표시 한 다음 두 번째 링크를 클릭하여 해당 드롭 다운을 표시 할 때입니다. 그러나 두 번째 링크에서는 URL을 간다. 따라서 첫 번째 링크를 다시 클릭하면 드롭 다운 메뉴를 표시하는 대신 해당 URL로 이동합니다. 그래서 두 번째 링크를 클릭 할 때 첫 번째 링크 기능을 재설정해야합니다. 그 반대도 마찬가지입니다.

필자의 예.

http://jsfiddle.net/3gpfc/37/

var visibleMenu1 = $('.menuHidden0 a'); 
    var visibleMenu2 = $('.menuHidden1 a'); 

    visibleMenu1.on('click', function() { 

     var clicks = $(this).data('clicks'); 
     if (!clicks) { 
      $('.drop-nav0').addClass('menuVisible'); 
     } else { 
      $('.drop-nav0').removeClass('menuVisible'); 
      return true;  
     } 
     $(this).data("clicks", !clicks);  
     return false; 
     visibleMenu2.off('click'); 
    }); 

    visibleMenu2.on('click', function() { 

     var clicks = $(this).data('clicks'); 
     if (!clicks) { 
      $('.drop-nav1').addClass('menuVisible'); 
     } else { 
      $('.drop-nav1').removeClass('menuVisible'); 
      return true; 
     } 
     $(this).data("clicks", !clicks); 
     return false; 
     visibleMenu1.off('click'); 
    }); 

어떤 도움

는 이해할 수있을 것이다.

Answer 1

return false 대신 preventDefault()을 사용하십시오.

반대쪽 링크를 되돌리려면 clicks 데이터를 재설정해야합니다.

var visibleMenu1 = $('.menuHidden0 a'); 
var visibleMenu2 = $('.menuHidden1 a'); 

visibleMenu1.on('click', function (e) { 

    var clicks = $(this).data('clicks'); 
    if (!clicks) { 
     e.preventDefault(); 
     $('.drop-nav0').addClass('menuVisible'); 
    } else { 
     $('.drop-nav0').removeClass('menuVisible'); 
    } 
    $(this).data("clicks", !clicks); 
    visibleMenu2.data("clicks", !visibleMenu2.data("clicks")); 
}); 

visibleMenu2.on('click', function (e) { 

    var clicks = $(this).data('clicks'); 
    if (!clicks) { 
     e.preventDefault(); 
     $('.drop-nav1').addClass('menuVisible'); 
    } else { 
     $('.drop-nav1').removeClass('menuVisible'); 
    } 
    $(this).data("clicks", !clicks); 
    visibleMenu1.data("clicks", !visibleMenu1.data("clicks")); 
}); 

Answer 2

난 아직도 최종 목표는 무엇을 얻을 수

 var visibleMenu1 = $('.menuHidden0 a'); 
    var visibleMenu2 = $('.menuHidden1 a'); 

    visibleMenu1.on('click', function (e) { 
     if(!visibleMenu2.data("clicks")){ 
      var clicks = $(this).data("clicks") 
      if(!clicks){ 
       e.preventDefault(); 
       $(".drop-nav0").addClass("menuVisible"); 
       $(this).data("clicks", !clicks); 
      }else{ 
       $(".drop-nav0").removeClass("menuVisible"); 
       $(this).data("clicks", !clicks); 
      } 
     }else{ 
      e.preventDefault(); 
      $(".drop-nav1").removeClass("menuVisible"); 
      visibleMenu2.data("clicks", false); 
     } 
    }); 

    visibleMenu2.on('click', function (e) { 
     if(!visibleMenu1.data("clicks")){ 
      var clicks = $(this).data("clicks") 
      if(!clicks){ 
       e.preventDefault(); 
       $(".drop-nav1").addClass("menuVisible"); 
       $(this).data("clicks", !clicks); 
      }else{ 
       $(".drop-nav1").removeClass("menuVisible"); 
       $(this).data("clicks", !clicks); 
      } 
     }else{ 
      e.preventDefault(); 
      $(".drop-nav0").removeClass("menuVisible"); 
      visibleMenu1.data("clicks", false); 
     } 
    });