用于移动菜单的简单 jQuery 左/右滑动切换动画

Question

我正在尝试为移动版网站创建一个从屏幕右侧滑入和滑出的菜单。

由于页边距较大，我有一个“ul”在页面加载时从屏幕开始。计划是有一个按钮，可以用“.animate”来回切换该边距，以隐藏和显示“ul”。

下面的第一段代码有效，但不会重复。因此，在“单击”时，菜单会出现、隐藏，然后在停止响应之前再次出现。这让我很困惑，所以我尝试了一条不同的路线并使用了“if”语句，但现在它只是继续向左滑动，尽管课程肯定会发生变化（我已经在控制台中检查过）。

现在我被难住了！有人可以帮忙吗？

// MOBILE MENU
$(function() {
	// create identical menu buttons with different classes	
	var $active = $("<div class='mm-active'><hr><hr><hr></div>");
	var $inactive = $("<div class='mm-inactive'><hr><hr><hr></div>");
  
	// append 'inactive' menu button to menu div
	$(".mobile-menu").prepend($inactive);

    $($inactive).click(function() {
    	$($inactive).hide();
	    $(this).next("ul").animate({'margin-left': '-='+90}, 1000);
    	$(".mobile-menu").prepend($active);
	});

	$($active).click(function() {
		$(this).nextAll("ul").animate({'margin-left': '+='+90}, 1000);
		$($active).remove();
		$($inactive).show();
	});
});

//And here with the 'if' statement...

$(function() {
	// create identical menu buttons with different classes	
	var $mm_btn = $("<div><hr><hr><hr></div>");
	var $classname = ($mm_btn).attr("class");

	// append mobile menu button to menu div
	$(".mobile-menu").prepend($mm_btn);

	$($mm_btn).click(function() {
		$($mm_btn).toggleClass('active');

		if($classname === 'active') {
			$(this).next("ul").animate({'margin-left': '+='+90}, 1000);
		} else {
			$(this).next("ul").animate({'margin-left': '-='+90}, 1000);				
		}
	});
});

.mobile-menu {
	position: absolute;
	top: 5px;
	right: 0;
	width: 25px;
	margin: 0 25px 0 0;
	padding: 5px 0 8px 5px;
	z-index: 1;
}

.mobile-menu hr {
	border: 0;
	height: 2px;
	background: black;
}

.mobile-menu ul {
	position: relative;
	z-index: -1;
	display: inline-block;
	text-align: right;
	margin-left: 50px;
	margin-top: -50px;
	padding: 50px 25px 5px 5px;
	list-style: none;
}

.mobile-menu ul li {
	padding: 3px;
}

<div class="mobile-menu">
	<ul>
		<a href="projects.html"><li class="projects">projects</li></a>
		<a href="about.html"><li>about</li></a>
		<a href="contact.html"><li>contact</li></a>
	</ul>
</div>

Answer 1

在第一种情况下，当您删除元素时，所有事件也会被删除：.remove()

在第二种情况下：$classname 在页面加载时被设置为空字符串并且从未更改，这就是为什么只执行else。

// MOBILE MENU
$(function() {
  // create identical menu buttons with different classes	
  var $active = $("<div class='mm-active'><hr><hr><hr></div>");

  // append 'inactive' menu button to menu div
  $(".mobile-menu").prepend($active);

  $($active).click(function() {

    if ($active.hasClass('mm-active')) {
      $(this).nextAll("ul").animate({
        'margin-left': '-=' + 90
      }, 1000);
    } else {
      $(this).nextAll("ul").animate({
        'margin-left': '+=' + 90
      }, 1000);
    }
    $active.toggleClass('mm-active');
  });
});

body {
  overflow: hidden;
}
.mobile-menu {
  position: absolute;
  top: 35px;
  right: 0;
  width: 25px;
  margin: 0 25px 0 0;
  padding: 5px 0 8px 5px;
  z-index: 1;
}
.mobile-menu hr {
  border: 0;
  height: 2px;
  background: black;
}
.mobile-menu ul {
  position: relative;
  z-index: -1;
  display: inline-block;
  text-align: right;
  margin-left: 50px;
  margin-top: -50px;
  padding: 50px 25px 5px 5px;
  list-style: none;
}
.mobile-menu ul li {
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-menu">

  <ul>
    <a href="projects.html">
      <li class="projects">projects</li>
    </a>
    <a href="about.html">
      <li>about</li>
    </a>
    <a href="contact.html">
      <li>contact</li>
    </a>
  </ul>
</div>