jquery - 如何仅在单击 <li> 时显示子菜单

Question

我需要帮助实现特定的移动效果。我想要 submenu仅在父级 <li> 时显示单击它应该像这样从右向左滑动 one (手机查看)

这是我当前的 FIDDLE

var flag = 100;
$('#button').click(
    function() {
        $('#right').animate({
            left: flag
        }, 'slow', function() {
            $('#button').html(flag ? 'Close' : 'Menu');
        });
        flag = flag ? 0 : 100;
    }
);

Answer 1

添加以下 CSS 和 jquery 更改。

CSS

#menu ul ul {
  display:none;
  padding:10px;    
}

JQUERY

 var effect = 'slide';
 var options = { direction: 'right' };
 var duration = 700;
 $("#menu ul > li a").click(function(){
    $(this).next().toggle(effect, options, duration);
 });

DEMO

注意:您必须为这种动画添加Jquery UI。