Question

我有一个N级菜单结构，我必须首先隐藏所有级别的子菜单，并在父菜单的悬停时显示它们。我一直在尝试这个我隐藏所有的孩子并显示它们点击但问题是，当我点击其他父级时，必须关闭之前打开的菜单，如果我再次单击该菜单，其子项应处于隐藏状态，我需要一些缓动和动画效果，同时打开和关闭菜单它应该作为一个切换。

这就是我一直在努力做的事情：

$(document).ready(function(){
$("li").children('ul').hide();
$("li a").click(function(){
$(this).next('ul').toggle();            
$(this).parent().siblings('li').children('ul').hide();

这里是我要做的事情的the js

我不应该在菜单上使用任何类和/或任何属性只有顶级ul有类仍然应该在jquery中完成所有事情我需要缓动和动画部分

Answer 1

您可以使用slideUp()和slideDown()添加一些动画。

jsFiddle

$(document).ready(function(){
    $("li").children('ul').hide();
    $("li a").click(function(){
        $(this).next('ul').find('ul').hide();
        $(this).next('ul').slideDown();            
        $(this).parent().siblings('li').children('ul').slideUp();           
    });     
});

通过在活动列表项上使用CSS3过渡，您也可以相当轻松地完成此操作。

编辑：我现在明白了，点击打开时，尝试添加此内容以隐藏所有内部列表。

$(this).next('ul').find('ul').hide();

Answer 2

要完成@Tyriar的答案，这就是如何使用JQueryUI缓动效果：http://jqueryui.com/effect/#easing

http://jsfiddle.net/6u4LJ/2/

$(document).ready(function () {
    $("li").children('ul').hide();
    $("li a").click(function () {
        $(this).next('ul').animate({
            height: "show"
        }, 2000, 'easeInOutBounce');
        $(this).parent().siblings('li').children('ul').animate({
            height: "hide"
        }, 2000, 'easeInOutBounce');
    });
});

如何使用动画和缓动效果隐藏和显示元素

2 个答案: