如何使外部Div从左键单击，然后在RI-lik上使用jQuery toggle和Animation右转

Question

菜单正常工作，但没有动画。我希望单击的.fullpagenav从左至右出来，然后重新单击返回时（从右至左）。如果您可以使用切换和动画进行操作，那就太好了，仅适用于短代码。

我在以下主题上找到了此代码：在单击和切换时与jQuery滑到一边

所以，我有以下代码：

	$( ".secondary-toggle" ).click(function() {
    $('.fullpagenav').animate({width:'toggle'},350);
	});

    .fullpagenav {
	position:fixed;
	height: 100%;
	width:100%;
	z-index: 2;
	background-color:#464646;
	display:none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
	  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
        <nav id="site-navigation" class="main-navigation" role="navigation">
         ...
	    </nav>
	  </div>
    </div>

Answer 1

上面的代码不起作用，我为您创建类似的代码，向您展示如何完成。它只是代码，如果您不了解某些内容，请问我。

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script>
  $(document).on('click', '.menu-item', function(e) {
  var self = $(e.currentTarget);
  self.toggleClass('menu-item-toggle')
  });
</script>
<style>
  .menu-item {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0;
    transition: left 2s;
  }
  .menu-item-toggle {
    left: 100px;
  }
</style>
<div class="menu-item">Menu item</div>

https://jsfiddle.net/s7076ja4/

Answer 2

首先，您需要在大多数页面的左侧设置它，然后创建一个具有左位置的类：0，然后在单击时切换该类，并为效果使用过渡。p>

	$( ".secondary-toggle" ).click(function() {
       if($(this).hasClass('active_nav')){
          $('.fullpagenav').removeClass('active_nav');
       }
       else{
          $('.fullpagenav').addClass('active_nav');
       }
       
	});

    .fullpagenav {
	position:fixed;
	height: 100%;
	width:100%;
	z-index: 2;
	background-color:#464646;
	left:-100%;
    transition: all 1s linear 1s;
    -webkit-transition: all 1s linear 1s;
    -moz-transition: all 1s linear 1s;
    
    }
    .active_nav{
        left:0!important;
        transition: all 1s linear 1s;
        -webkit-transition: all 1s linear 1s;
        -moz-transition: all 1s linear 1s;
    
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
	  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
        <nav id="site-navigation" class="main-navigation" role="navigation">
         ...
	    </nav>
	  </div>
    </div>

Answer 3

我将 fullpagenavdiv放在最左边，然后按照您的要求单击该动画。

以下是更新的代码

	$( ".fullpagenav" ).click(function() {
      $('.secondary').animate({width:'toggle'},350);
});

    .fullpagenav {
        position: fixed;
        height: 100%;
        width: 1%;
        margin-left: -1%;
    }
    
    .secondary {
        position: fixed;
        height: 100%;
        width: 10%;
        background-color: #464646;
        display: none;
        padding-left: 1%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
	  <div id="secondary" class="secondary toggled-on" aria-expanded="true">
        <nav id="site-navigation" class="main-navigation" role="navigation">
         ...
	    </nav>
	  </div>
    </div>