移动菜单

Question

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

我有一个＆＃39; ul＆＃39;由于其较大的余量而在页面加载时从屏幕开始。计划是有一个按钮，可以使用＆＃39; .animate＆＃39;来回切换该边距。为了隐藏和揭示＆＃39; ul＆＃39;

下面的第一个代码块有效，但不会重复。因此，点击＆＃39;点击＆＃39;，菜单出现，隐藏，然后再次出现，然后停止响应。这让我很困惑，所以我尝试了另一条路线，然后选择了一个＆＃39; if＆＃39;虽然班级肯定在改变（我已经在控制台中检查了它），但它现在只是继续向左滑动。

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

＆＃13;

＆＃13;

// 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);				
		}
	});
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

＆＃13;

＆＃13;

// 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');
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;