2014-10-30 53 views
0

基於元素被用戶點擊的函數內部變更是可能的嗎? 在我的情況下,這將完全適用於一種菜單,但我需要兩個完全相同的菜單 有一點區別 - 第二個點擊處理程序必須將更改$ sidebar的toggleDrawer加載到$ navbar變量。根據哪個元素被點擊變更變量

/* 
    Variables 
    */ 

    var $sidebar = $('#sidebar'), 
     $navbar = $('#navbar'), 
     drawerOpen = false, 

    /* 
    Functions 
    */ 

    closeDrawer = function() { 
     drawerOpen = false; 
     $body.css('overflow','').removeClass('sidebar-open'); 
     $sidebar.removeClass('open'); 
     $sidebar.animate({'right':'-50%'},{duration:300}); 
     $(this).hide(); 

    }, 

    openDrawer = function() { 
     drawerOpen = true; 
     $body.addClass('sidebar-open').css('overflow','hidden'); 
     $sidebar.addClass('open'); 
     $sidebar.animate({'right':'0%'},{duration:300});     
    }, 

    toggleDrawer = function() { 
     if (drawerOpen) { 
      closeDrawer(); 
     }else{ 
      openDrawer(); 
     } 
    }, 

    /* 
    Bind Events 
    */ 

    $document.on('click', '.drawer-toggle-sidebar', function(event){ 
     toggleDrawer(); 
     event.preventDefault(); 
    }); 

    $document.on('click', '.drawer-toggle-navbar', function(event){ 
     toggleDrawer(); 
     event.preventDefault(); 
    }); 
+1

有沒有必要這樣做。只需在函數中添加一個參數即可知道正在操作的元素openDrawer($ sidebar); – 2014-10-30 22:59:54

回答

1

爲了詳細說明上述評論,並顯示一個例子:

這裏是你的職責與傳遞中的元素,你要關閉打開/:

/* 
 
    Functions 
 
    */ 
 

 
    closeDrawer = function(drawer) { 
 
     drawerOpen = false; 
 
     $body.css('overflow','').removeClass('sidebar-open'); 
 
     drawer.removeClass('open'); 
 
     drawer.animate({'right':'-50%'},{duration:300}); 
 
     $(this).hide(); 
 

 
    }, 
 

 
    openDrawer = function(drawer) { 
 
     drawerOpen = true; 
 
     $body.addClass('sidebar-open').css('overflow','hidden'); 
 
     drawer.addClass('open'); 
 
     drawer.animate({'right':'0%'},{duration:300});     
 
    }, 
 

 
    toggleDrawer = function(drawer) { 
 
     if (drawerOpen) { 
 
      closeDrawer(drawer); 
 
     }else{ 
 
      openDrawer(drawer); 
 
     } 
 
    },

而你的綁定事件:

/* 
 
    Bind Events 
 
    */ 
 

 
    $document.on('click', '.drawer-toggle-sidebar', function(event){ 
 
     toggleDrawer(event.currentTarget); 
 
     event.preventDefault(); 
 
    }); 
 

 
    $document.on('click', '.drawer-toggle-navbar', function(event){ 
 
     toggleDrawer(event.currentTarget); 
 
     event.preventDefault(); 
 
    });

你甚至可以在點擊事件的組合二而一,只是通過在currentTarget當前。

我希望這會有所幫助。