单击下一个菜单项时,防止向下滑动子菜单向上滑动

时间:2014-08-02 02:38:25

标签: javascript jquery html css menu

我有一个下拉菜单,在子菜单中有链接,当我点击菜单中的另一个链接时,我希望子菜单链接淡入,而其他链接淡出(不关闭并再次打开)。目前,当我点击另一个菜单项时,子菜单向上滑动然后向下滑动以显示该子菜单中的项目。

这是小提琴http://jsfiddle.net/EGp35/1/。如果需要,请随意更好地构建代码。此外,唯一的活动链接是“节目”和“电影”。谢谢!

$(document).ready(function() {
    $('#shows').click(function(e) {
        $('.sub-menu-1').slideToggle(200);
        $('.sub-menu-2').hide();
            return false; // prevent default click action from happening!
            e.preventDefault(); // same thing as above
    });
});


$(document).ready(function() {
    $('#films').click(function(e) {
        $('.sub-menu-2').slideToggle(200);
        $('.sub-menu-1').hide();
            return false; // prevent default click action from happening!
            e.preventDefault(); // same thing as above
    });
});

1 个答案:

答案 0 :(得分:0)

替换

   $('.sub-menu-1').slideToggle(200);
   $('.sub-menu-2').hide();

  $('.sub-menu-1').slideDown();
  $('.sub-menu-2').slideUp();

Here the fiddle