fix #nav_main click handler's wrong behavior on mobile

fediev · fediev · commit 44994e601ce4 · 2015-03-11T03:57:32.000+09:00
In the event handler, 'this' is not a jquery object, but a DOM object.
Instead of using $(this) to fix this problem, $mainNav is used
because it is already created and no need to be re-wrapped
as jquery object.

$varname style is used for preventing this type of problem.
diff --git a/site/javascript/garden.js b/site/javascript/garden.js
@@ -143,7 +143,7 @@ function Page() {
 Page.prototype = {
     init: function() {
         var that = this,
-            mainNav = $('#nav_main');
+            $mainNav = $('#nav_main');
 
         $.extend(this, {
             scrollLast: 0,
@@ -177,14 +177,14 @@ Page.prototype = {
         // Show menu for tablets
         $('#show_menu').click(function (){
             var scrollTop = $.mobile ? that.window.scrollTop() : 0;
-            
-            mainNav.slideDown(300).css('top', scrollTop);
+
+            $mainNav.slideDown(300).css('top', scrollTop);
             return false;
         });
-        
-        $('#nav_main').click(function(){
+
+        $mainNav.click(function(){
             if(that.window.width() < 1000)
-                mainNav.slideUp(300, function() {this.removeAttr('style');});
+                $mainNav.slideUp(300, function() { $mainNav.removeAttr('style'); });
         });
     },
 
