如何滑动垂直菜单jQuery？

我一直试图创建一个CSS和jQuery的垂直幻灯片菜单，但没有运气。我如何获得jQuery中的每个点击项目菜单？如何滑动垂直菜单jQuery？

from my ul class =“flyoutFirst”。

每个class =“flyoutFirst”都有自己的项目链接，如标记。

谢谢你教我。

这里是例如jQuery代码：

$(function() { 
    $('.list li').click(function() { 
    $('.list').animate({ 
     left: '-100%' 
    }); 
    return false; 
    }) 

    $('.back').click(function() { 
    $('.list').animate({ 
     left: '0' 
    }); 
    }) 

});

更多细节： link to jsfiddle

最好的问候，

猿

来源

2016-07-16 Giant Ape

试过的链接，我认为它做工精细，请清楚地强调你的问题。你想要什么

来源

2016-07-16 12:03:39

喜@reside感谢您的回答。基本上我想显示我的UL类=“flyoutFirst”。现在，当我点击文章时，它只显示最后一个ul class =“flyoutFirst”。 –

其实，我不明白，你想做什么。但是，有关与嵌套元素点击事件的所有信息，你可以在这条路上：

$('.list li').click(function(e) { 
console.log(e);

为“E”的说法，你可以得到所有的信息。 https://jsfiddle.net/cfrd6mg9/

来源

2016-07-16 12:06:09

嗨@Alexey抱歉，不清楚的问题。当我点击文章时，我想显示我的每个课程=“flyoutFirst”。 –

对不起，但我不明白，你的班级应该包含在哪里 –

好Finaly我找到了一个解决方案。

也许这不是一个好的解决方案，但它是工作！在我的js文件：

$(function() { 
     $('.list li').click(function() { 
     $('.list').animate({ 
      left: '-100%' 
     }); 
     $(this).find('.flyoutFirst').css({display: 'block'}); 
     return false; 
     }) 

     $('.back').click(function() { 
     $('.list').animate({ 
      left: '0' 
     }, function(){ 
      $(this).find('.flyoutFirst').css({display: 'none'}); 
     }); 
     }) 

    });

看到我更新的jsfiddle

，只是添加显示：没有在我的课flyoutFirst在CSS。希望也能帮助人们非常基本的想法如何创建一个幻灯片菜单。谢谢大家。

最好的问候，

猿

来源

2016-07-16 14:57:40

如何滑动垂直菜单jQuery？

回答

相关问题