有没有办法缩小我的菜单按钮的回调？

Question

我对 Javascript 还很陌生，我正在努力优化我的代码。

所以这只是我做的一个简单的菜单切换，我想知道是否有办法更好地优化它，因为我处理菜单的功能几乎相同。

jQuery(function($) {
    $(".open-menu").click(function(event){
      event.preventDefault();
      $('.menu').addClass('active');
    } );

     $(".close-menu").click(function(event){
      event.preventDefault();
      $('.menu').removeClass('active');
    } );
});

.menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #f4f7fc;
  margin-left: -100%;
  transition: margin-left .5s ease;
}

.active {
  margin-left: 0;
}

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

<div class="menu">
  <ul>
    <li><a href="#close-menu" class="close-menu">Close</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About our project</li></a>
  </ul>
</div>

<a href="#open-menu" class="open-menu">Open menu</a>

Answer 1

试试这样的：

jQuery(function($) {
  t = 0;
  $(".open-menu,.close-menu").click(function(event) {
    if (t == 0) {
      t = 1;
      event.preventDefault();
      $('.menu').toggleClass('active').promise().done(function() {
        t = 0;
      })
    }
  });
});

.toggleClass('active') 将根据元素是否具有类来添加/删除类

jQuery(function($) {
  t = 0;
  $(".open-menu,.close-menu").click(function(event) {
    if (t == 0) {
      t = 1;
      event.preventDefault();
      $('.menu').toggleClass('active').promise().done(function() {
        t = 0;
      })
    }
  });
});

.menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #f4f7fc;
  margin-left: -100%;
  transition: margin-left .5s ease;
}

.active {
  margin-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li><a href="#close-menu" class="close-menu">Close</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About our project</li></a>
  </ul>
</div>

<a href="#open-menu" class="open-menu">Open menu</a>

Answer 2

欢迎来到 StackOverflow。有几种方法可以优化您的代码。

1. 您的 HTML 中有一个小错误：<li><a href="#about">About our project</li></a>。您的关闭 </a></li> 已交换。
2. 您可以使用样式按钮代替锚点，这样您就可以进一步缩小代码。
3. 您可以将打开和关闭链接更改为一个通用类，然后使用toggleClass
4. 为了获得更好的性能，不要使用margin-left，而是使用transform: translateX (here is an article about why)

jQuery( function( $ ) {
  $( '.menu-toggle' )
    .click( () => $( '.menu' ).toggleClass( 'active' ) );
} );

.menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #f4f7fc;
  transform: translateX( -100% );
  transition: transform .5s ease;
}

.active {
  transform: translateX( 0 );
}

.menu-toggle {
  background: none;
  border: none;
  padding: inherit;
  margin: inherit;
  font: inherit;
  
  color: blue;
}

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

<div class="menu">
  <ul>
    <li><button class="menu-toggle">Close</button></li>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About our project</a></li>
  </ul>
</div>

<button class="menu-toggle">Open menu</button>

Answer 3

你可以清楚地缩短一点。您不必为每个元素重写代码。我通过添加 data 属性和定义菜单操作元素的自定义类 controls 稍微修改了您的 HTML。

所以我听一下controls 类的点击，调用preventDefault()，然后使用ternary operator 来缩短类切换过程。

这是一个有效的小提琴：

jQuery(function($) {
	$('.controls').on('click', function(e){
  	e.preventDefault();
    $('.menu').removeClass('active').addClass(($(this).data('action') === 'open') ? 'active' : '');
  });
});

.menu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background: #f4f7fc;
  margin-left: -100%;
  transition: margin-left .5s ease;
}

.active {
  margin-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li><a href="#close-menu" data-action="close" class="controls">Close</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About our project</a></li>
  </ul>
</div>

<a href="#open-menu" data-action="open" class="controls">Open menu</a>

Answer 4

我会保持你现在的样子（除了缩进更好一点）。你有两个不同的按钮，它们做两种不同的事情。现在，差异很小，但我经常将更多代码连接到打开和关闭按钮，这两者之间有所不同。发生了什么很明显，尤其是与更最小的版本相比。

其他解决方案导致切换功能。我不是这个的忠实粉丝，因为当你不小心点击了两次关闭（发生的频率比你想象的要多）时，你的菜单会再次打开。通过拆分功能，您可以更好地控制用户界面。