如何正確地檢查使用jquery點擊元素

我想弄清楚正確的方式或更好的滑出一個導航塊，然後隱藏導航塊，如果點擊相同的元素。這是我到目前爲止：如何正確地檢查使用jquery點擊元素

$('.menu').click(function(e) { 

    e.preventDefault(); 

    $('#pic-slideNav').css('display', 'block'); 

    if ($.browser.webkit) { 
     $('#pic-wrapper').css('-webkit-transform', 'translate(250px,0px)'); 
     console.log('This is Chrome'); 
    } else { 
     $('#pic-wrapper').css('transform', 'translate(250px,0px)'); 
     console.log('This is Everything else'); 

    } 
});

我也檢查瀏覽器類型，所以我可以通過正確的css規則。

更新代碼，爲我工作：

$('.menu-icon').click(function(e) { 

    e.preventDefault(); 

    if($('#pic-slideNav').is(':visible')) { 
     $('#pic-slideNav').hide(); 
     if ($.browser.webkit) { 
      $('#pic-wrapper').css('-webkit-transform', 'translate(0px,0px)'); 
      console.log('This is Chrome'); 
     } else { 
      $('#pic-wrapper').css('transform', 'translate(0px,0px)'); 
      console.log('This is Everything else'); 
     } 

    } else { 
     $('#pic-slideNav').show(); 
     if ($.browser.webkit) { 
      $('#pic-wrapper').css('-webkit-transform', 'translate(250px,0px)'); 
      console.log('This is Chrome'); 
     } else { 
      $('#pic-wrapper').css('transform', 'translate(250px,0px)'); 
      console.log('This is Everything else'); 
     } 
    } 

});

我敢肯定有實現這一目標的一個更清潔的方式，但它的工作原理。

來源

2012-12-29 TikaL13

退房jQuery的'切換（）'函數...是你在找什麼？ http://api.jquery.com/toggle/ –

@iight toggle（）不支持動畫。 – cgTag

$ .browser已在最新版本的jquery中被棄用。 –

您是否在尋找something like this

var i=0; 
jQuery("#btn").click(function() { 
    var t = (Math.pow(-1,i))*160; 
    jQuery("#id").stop(true, false).animate({ 
     left: t 
    }, 500); 
    i = (i>10) ? 0 : (i+1); 
});

來源

2012-12-29 21:19:14 Anujith

是的，就像那樣。 – TikaL13

我想我真正想要完成的是Mashable爲他們的新響應網站所做的。當寬度小於320像素時，您會看到一個圖標，點擊時會顯示隱藏的菜單並轉換主體。我所需要做的就是在再次點擊該元素時恢復原狀。 – TikaL13

更新了我的問題 – TikaL13

如何正確地檢查使用jquery點擊元素

回答

相關問題