Question

我正在开发一个菜单，就像一个移动菜单。我希望当我点击图像时它会向下滑动并显示菜单，当点击该图像时它会向上滑动。并且当我点击身体的任何地方时它也会想要滑动。当我点击图像并点击身体时，我的菜单正在工作。

但是再次点击图片时无法向上滑动菜单。这就是问题所在。

我正在使用此代码

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

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

http://goo.gl/gMeDgz

由于

Answer 1

使用：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/

Answer 2

试试此代码

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

尝试JQuery切换 - http://api.jquery.com/toggle/。切换将自己处理替代品。写css到slideup和slidingown。

如何在单击div时通过jQuery显示和隐藏，并在单击body时隐藏

3 个答案: