jQuery Mobile的敲擊事件

Question

$(function() { 
    $('.quickNav').live('tap',function(event) { 
     if ($(".select_body").is(":hidden")) 
     { 
       $(".select_body").show(); 
     } 
     else 
     { 
      $(".select_body").hide(); 
     }   
    }); 
}); 

這工作得很好，除了一次它是可見的，你再次點擊它不會消失。

想法？

Answer 1

$('.quickNav').live('tap',function(event) { 
    $(".select_body").toggle(); // toggles the visibility/display of the element. 
}); 

這並不等同於冗長的if/else腳本

見toggle method documentation在jQuery的API文檔。

Answer 2

一旦元素被隱藏，其高度和寬度爲零。這意味着當你點擊同一個地方時，你實際上並沒有第二次擊中元素。

我建議將其不透明度設置爲零。 這裏是那種你可以做什麼：

$(function() { 
    $('.quickNav').live('tap',function(event) { 
     if ($(".select_body").is(":hidden")) 
     { 
      $(".select_body").css("opacity", 1); 
     } 
     else 
     { 
      $(".select_body").css("opacity", 0); 
     }   
    }); 
}); 

和較短的版本相同的行爲的：

$(function() { 
    $('.quickNav').live('tap',function(event) { 
     $(".select_body").css("opacity", 1 - parseInt($(".select_body").css("opacity"))); 
    }); 
}); 

我還沒有真正測試了這個代碼，所以我甚至不知道這是否會運行！

注意：fadeOut（）將在其動畫結尾處使用hide（），所以它在這裏並沒有真正的幫助。