如何通过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/