comment montrer et cacher par jQuery quand cliquez sur un div et masquer quand cliquez sur le corps aussi

Question

Je travaille sur un menu qui est comme un menu mobile.Je veux quand je clique sur l'image, il va glisser vers le bas et montrer le menu et lorsque vous cliquez sur cette image, il va glisser. et je veux aussi quand je clique n'importe où dans le corps, il va glisser aussi. Mon menu fonctionne quand je clique sur l'image et quand je clique sur le corps.

Mais ne peut pas glisser vers le haut du menu lorsque vous cliquez à nouveau sur l'image. C'est le problème.

J'utilise ce code

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

c'est mon lien. cliquez sur le 1er lisez plus. vous pouvez voir le menu.

http://goo.gl/gMeDgz

Merci

Answer 1

Essayez ce code

$(".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

La fonction slideToggle sera "bascule" la visibilité

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

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

Answer 3

essayer bascule JQuery - http://api.jquery.com/toggle/. bascule gère les alternatives par lui-même. écrire css à slideup et slidedown.

Answer 4

Utilisez: visible ou: caché pour vérifier si le ul est visible, puis faites glisser vers le haut s'il est visible.

$(".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/