如何滑动垂直菜单jQuery？答案

【问题标题】：how to slide vertical menu jQuery?如何滑动垂直菜单jQuery？
【发布时间】：2016-07-16 11:51:33
【问题描述】：

我曾尝试使用 css 和 jquery 创建垂直幻灯片菜单，但没有运气。如何在 jquery 中获取每个点击项菜单？

来自我的 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

最好的问候，

猿

【问题讨论】：

标签： jquery html css

【解决方案1】：

尝试了链接，我认为它工作正常，请明确强调您的问题。你想要什么

【讨论】：

嗨@reside 感谢您的回答。基本上我想展示我的 ul class="flyoutFirst"。现在，当我单击文章时，它只显示最后一个 ul class="flyoutFirst"。

【解决方案2】：

其实，我不明白，你想做什么。但是您可以通过这种方式获得有关带有嵌套元素的点击事件的所有信息：

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

使用“e”参数可以获得所有信息。 https://jsfiddle.net/cfrd6mg9/

【讨论】：

嗨@Alexey 对不清楚的问题感到抱歉。我想在点击文章时显示我的每个 class="flyoutFirst"。
对不起，我不明白，你的课程应该包含在哪里

【解决方案3】：

好的，我终于找到了解决方案。

也许这不是一个好的解决方案，但它是有效的！在我的 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查看我的更新

只需在 css 中我的类 flyoutFirst 中添加 display: none 。希望也能帮助人们了解如何创建幻灯片菜单。谢谢大家。

最好的问候，

猿

【讨论】：