Question

我对Javascript很陌生，我试图让我的代码更加优化。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

所以我听取了controls课程的点击，拨打preventDefault()，然后使用ternary operator缩短课程切换流程。

这是一个工作小提琴：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

您的HTML中有一个小错误：<li><a href="#about">About our project</li></a>。您的结束</a></li>已被换掉。
您可以使用样式按钮代替锚点，这样您就可以进一步缩小代码。
您可以将开始和结束链接更改为一个通用类，然后使用toggleClass
为了获得更好的效果，请使用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>

private void addOSXKeyStrokes(InputMap inputMap) {
  inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_C, KeyEvent.META_DOWN_MASK), DefaultEditorKit.copyAction);
  inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_X, KeyEvent.META_DOWN_MASK), DefaultEditorKit.cutAction);
  inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_V, KeyEvent.META_DOWN_MASK), DefaultEditorKit.pasteAction);
  inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_A, KeyEvent.META_DOWN_MASK), DefaultEditorKit.selectAllAction);
  inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_C, KeyEvent.META_DOWN_MASK), "copy");
  inputMap.put(KeyStroke.getKeyStroke(KeyEvent.VK_A, KeyEvent.META_DOWN_MASK), "selectAll");
}

Answer 4

我保留它，因为你现在拥有它 （除了缩进更好）。你有两个不同的按钮，它们做两件不同的事情。现在，差异很小，但我经常将更多代码连接到打开和关闭按钮，两者之间有所不同。很明显发生了什么，特别是与更小的版本相比。

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

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

4 个答案: