jquery - 如何在单击 div 时通过 jQuery 显示和隐藏以及在单击 body 时隐藏

Question

我正在开发一个类似于移动菜单的菜单。我希望当我单击图像时它会向下滑动并显示菜单，当单击该图像时它会向上滑动。并且还希望当我点击 body 的任何地方时它也会向上滑动。当我点击图像和点击正文时，我的菜单可以正常工作。

但是再次点击图片无法上滑菜单，就是这个问题。

我正在使用这个代码

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

这是我的链接。点击 1st 阅读更多。你可以看到菜单。

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');
        }
  });