減少jQuery CSS更改的javascript代碼（打開/關閉畫布導航）

-1

我正在創建類似Foundation的工作方式的自定義非畫布導航。基本上我有2個圖標和click觸發器來調整CSS。我想知道是否有可能通過將此代碼轉換爲單個切換函數而不是2個單獨的函數來打開/關閉來減少代碼。這是我目前的工作：減少jQuery CSS更改的javascript代碼（打開/關閉畫布導航）

jQuery(".navMenuOpen").click(function(event) { 
    event.preventDefault(); 
    jQuery(".page-wrapper").css("left", "70%"); 
    jQuery(".off-canvas-nav").css("left", "0") 
    jQuery(".navMenuOpen").css("display", "none"); 
    jQuery(".navMenuClose").css("display", "block"); 
}); 
jQuery(".navMenuClose").click(function(event) { 
    event.preventDefault(); 
    jQuery(".page-wrapper").css("left", "0"); 
    jQuery(".off-canvas-nav").css("left", "-100%") 
    jQuery(".navMenuOpen").css("display", "block"); 
    jQuery(".navMenuClose").css("display", "none"); 
});

是否有可能將其減少到單個函數/ HTML元素？

在此先感謝！

來源

2014-02-28 user3306747

爲什麼不添加合適的css並在普通父元素上切換類？即'.click（function（）{$（'body'）。toggleClass（'showMenu'）;}）'。代碼少得多。 – AD7six

謝謝@ AD7six，我現在正在閱讀toggleClass，看起來這將是一條路。 – user3306747

你可以在這些行中嘗試一些東西。

jQuery(".navMenuOpen, .navMenuClose").click(function (event) { 
    var wrapperLeft = '70%', 
     canvasLeft = '0', 
     openDisplay = 'none', 
     closeDisplay = 'block', 
     $this = $(this); 

    event.preventDefault(); 

    if($this.hasClass('navMenuClose')) { 
     wrapperLeft = '0', 
     canvasLeft = '-100%', 
     openDisplay = 'block', 
     closeDisplay = 'none'; 
    } 
    jQuery(".page-wrapper").css("left", wrapperLeft); 
    jQuery(".off-canvas-nav").css("left", canvasLeft) 
    jQuery(".navMenuOpen").css("display", openDisplay); 
    jQuery(".navMenuClose").css("display", closeDisplay); 
});

來源

2014-02-28 20:13:13

看起來比我目前所擁有的更清潔，謝謝！ – user3306747

減少jQuery CSS更改的javascript代碼（打開/關閉畫布導航）

回答

相關問題