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

时间:2014-09-03 06:55:16

标签: jquery css css3

我需要帮助实现移动设备的某种效果。我希望仅在点击父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;
    }
);

1 个答案:

答案 0 :(得分:2)

添加以下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