Question

我正在处理这个小菜单：http://jsfiddle.net/6a3eZ/25/

问题在于滑动打开的“MISC”和“MISC2”菜单。当一个打开时，另一个需要关闭，并且我在下面粘贴的“切换”代码在前两次点击时工作正常，但是菜单项只需要一次而不是两次点击再次激活。有关如何通过单击保持一致的任何线索？

出于某种原因，在触摸设备上也无法关闭菜单。

代码随处可见“悬停”，但它确实需要点击激活。

这就是我所拥有的：

function mainmenu(){

    $('.menu ul').css({display: "none"});

    $('.menu li.sub').toggle(function(){
        $(this).siblings('li').find('ul').slideUp(200);
        $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(200);
    },function(){
        $(this).find('ul:first').slideUp(200);
    });

    $('.sub-menu li a').click(function(e) {
        e.stopPropagation();
    }); 

};

$(document).ready(function(){                  
    mainmenu();
});

Answer 1

试试这个。应该可以正常工作：http://jsfiddle.net/Ptz9F/

我会说，使用一些类并以正确的方式指定步骤：）

只有我的jQuery：

$(document).ready(function(){                  
    $('.menu ul.sub-menu').css({display: "none"});
    $('.menu li.sub > a').click(function(e){
        var $this = $(this),
            $parent = $this.parent('li'),
            $sub = $('.sub-menu', $parent);

        if (!$sub.hasClass('slided-down'))
        {
            // this sub is not visible
            $('.sub-menu.slided-down').slideUp(200).removeClass('slided-down');
            $sub.slideDown(200).addClass('slided-down');
        }
        else
        {
            // this sub is visible
            $sub.slideUp(200).removeClass('slided-down');
        }

        e.preventDefault();
        return false;
    });
});

Answer 2

未经测试，但尝试更像这样的事情：

$(document).ready(function(){                  
    $('.menu ul').hide();

    $('.menu li.sub').click(function() {
        $(this).find('ul:first').slideToggle(200)
               .end().siblings('li').find('ul').slideUp(200);
    });
});

jQuery'切换'需要两次点击

2 个答案: