如何通過jQuery顯示和隱藏當點擊一個div並隱藏點擊時body也

Question

我正在使用一個菜單，就像是一個移動menu.I想當我點擊圖片時，它會滑下來，並顯示菜單，當點擊該圖像時，它會滑動。也希望當我點擊身體的任何地方時，它也會滑動。當我點擊圖片並點擊身體時，我的菜單正在工作。

但是，當再次點擊圖像時不能向上滑動菜單。這就是問題所在。

我使用此代碼

$(".service_detail_menu img").click(function(e){ 
    $(".service_detail_menu ul").slideDown(300); 
     e.stopPropagation(); 
}); 
$(document).click(function(){ 
    $(".service_detail_menu ul").slideUp(300); 
}); 

這是我的鏈接。點擊第一次閱讀更多。你可以看到菜單。

http://goo.gl/gMeDgz

感謝

Answer 1

試試這個代碼

$(".service_detail_menu img").click(function(e) { 
    if ($(this).hasClass('active')) { 
     $(".service_detail_menu ul").slideUp(300); 
     $(this).removeClass('active'); 
    } 
    else { 
     $(".service_detail_menu ul").slideDown(300); 
     $(this).addClass('active'); 
    } 
    }); 

    $(document).mouseup(function(e) { 
     if ($(e.target).parents(".service_detail_menu").length == 0) { 
      $(".service_detail_menu ul").slideUp(300); 
      $(".service_detail_menu img").removeClass('active'); 
     } 
    }); 

Answer 2

的的slideToggle功能將 「切換」 的知名度

$(".service_detail_menu ul").slideToggle(300); 

http://api.jquery.com/slidetoggle/

Answer 3

嘗試JQuery的切換 - http://api.jquery.com/toggle/。切換將自行處理替代方案。 寫入CSS滑動和滑動。

Answer 4

使用：visible或：hidden來檢查ul是否可見，如果可見，則向上滑動。

$(".service_detail_menu img").click(function(e){ 
    $(".service_detail_menu ul:hidden").slideDown(300); 
    $(".service_detail_menu ul:visible").slideUp(300); 
    e.stopPropagation(); 
}); 

http://api.jquery.com/visible-selector/