当点击菜单上，它会打开，当再次点击关闭

问题描述：

 // jQuery Document 
    var main = function() { 
    /* Push the body and the nav over by 285px over */ 
    $('#share').click(function() { 
    $('.menu').animate({ 
     right: "0px" 
    }, 200); 

    $('body').animate({ 
     right: "285px" 
    }, 200); 
    }); 

    /* Then push them back */ 
    $('html').click(function() { 
    $('.menu').animate({ 
     right: "-285px" 
    }, 200); 

    $('body').animate({ 
     right: "0px" 
    }, 200); 
    }); 
}; 


$(document).ready(main);

而且，我想要做这样的事情。如果在菜单图标，用户点击（#share）菜单将出现，如果菜单是可见的，并且用户再次点击，它将消失。如何简单地做到这一点？我想尽可能简单...请帮助我:)

而且是的...我写了类似html的东西。点击..然后关闭菜单..应该有菜单图标的名称（#share）

有菜单的CSS：

.menu { 
    background-color: #373737; 
    right: -285px; 
    height: 100%; 
    position: fixed; 
    width: 285px; 
}

和HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Minecraft</title> 
     <link href="styles_m.css" rel="stylesheet" type="text/css"> 

    </head 


    <body> 
    <div class="menu"> 

    </div> 

     <div id="header"> 
     <div id="main"> 
      <a href="minecraft.html"><img src="my_logo.png"></a> 
     </div> 
     <div id="share"> 
      <img name="menu" src="my_menu.png"> 
     </div> 
     </div> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script type="text/javascript" src="main.js"> 

     </script> 
    </body 
</html>

添加HTML也或创建一个jsfiddle演示 – Tushar

kk，我会做 –

@PetrCihlar查看我的答案老板...不使用太多变量... –

答

只需使用fadeToggle()：

$(function() { 
 
    $(".showMenu").click(function() { 
 
    $(this).next(".menu").fadeToggle(400); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button class="showMenu">Show Menu</button> 
 
<div class="menu" style="display: none;"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    </ul> 
 
</div>

或者，如果你想使它向右滑动，您可以用动画：

只需使用animate()：

$(function() { 
 
    $(".showMenu").click(function() { 
 
    if ($(this).next(".menu").css("left") != "0px") 
 
     $(this).next(".menu").animate({ 
 
     left: 0 
 
     }, 1000); 
 
    else 
 
     $(this).next(".menu").animate({ 
 
     left: -250 
 
     }, 1000); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button class="showMenu">Show Menu</button> 
 
<div class="menu" style="position: relative; left: -250px;"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    </ul> 
 
</div>

答

HTML 5数据标签可以是解决方案。看看我的小提琴

$('.showMenu').click(function() { 
 
    var active = $('.menu').data('active'); 
 
    
 
    if(active === 'N') { 
 
    $('.showMenu').html('Hide Menu'); 
 
    $('.menu').fadeIn(100); 
 
    $('.menu').data('active', 'Y'); 
 
    } else { 
 
    $('.showMenu').html('Show Menu'); 
 
    $('.menu').fadeOut(100); 
 
    $('.menu').data('active', 'N'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<button class="showMenu">Show Menu</button> 
 
<div class="menu" data-active="N" style="display: none;"> 
 
    <ul> 
 
    <li>Menu 1</li> 
 
    <li>Menu 2</li> 
 
    <li>Menu 3</li> 
 
    </ul> 
 
</div>

答

你也可以使用一个变量的控制，知道什么时候可以显示/隐藏元素（jsFiddle）：

var control = false; 
var main = function() { 
    $('#share').click(function() { 
     if(control === true){ 
      $('.menu').animate({ 
       right: "-285px" 
      }, 200); 

      $('body').animate({ 
       right: "0px" 
      }, 200); 
      control = false; 
      return; 
     } 
     control = true; 
     $('.menu').animate({ right: "0px" }, 200); 
     $('body').animate({ right: "285px" }, 200); 
    }); 
};

是啊，我的东西你有最好的答案...它的简单和做得很好...非常感谢... :) –

但是，当我点击图标时，它会慢慢淡入，当我再次点击它时，它会......只是移动它的权利......没有我的400速度......为什么？ –

我很高兴如果我有帮助:) – kosmos

答

$('button').click(function() { 
 

 
    $('.menu').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>click</button> 
 
<div class="menu" style="display:none;"> 
 
    <ul> 
 
    <li>menu 1</li> 
 
    <li>menu1</li> 
 
    <li>menu 3</li> 
 
    <li>menu 4</li> 
 
    </ul> 
 
</div>

当点击菜单上，它会打开，当再次点击关闭

相关推荐