如果只有< li>单击 [英] How to make a submenu display only if the <li> is clicked

问题描述

我需要帮助实现移动的一定效果。我想让子菜单只显示父项< li> 被点击并且它应该从右到左滑动就像一个（在移动设备上查看）

这是我目前的 FIDDLE

  var flag = 100; 
 $（'＃button'）。点击（
 function（）{
 $（'＃right'）。animate（{
 left：flag 
} 'slow'，function（）{
 $（'＃button'）。html（flag？'Close'：'Menu'）; 
}）; 
 flag = flag？ 100; 
} 
）; 
  

解决方案

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

注意：您必须添加 UI 用于此类动画。

I need help achieving a certain effect for mobile. I want the submenu to display only if the parent <li> is clicked and it should slide from right to left just like this one (view on mobile)

here is my current FIDDLE

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

解决方案

Add the following CSS and jquery changes.

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

NOTE: You have to add Jquery UI for this kind of animation.

这篇关于如果只有< li>单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！