jQuery 清理

Question

总的来说，我对 jQuery 和 JavaScript 还很陌生。

我为一个简单的推送菜单编写了这段代码，但我觉得可能有更好的方法来编写它，因为其中一些似乎重复了。

任何建议都会很棒。

完整代码可见here：

//Mobile Push menu

// Open or close menu using menu bar icon or clicking outside of the menu
$('.menu-icon').click(function() {
    $('.main-content').toggleClass('push-open push-close');  
    $('.menu-icon').toggleClass('push-open push-close');
});

// Close menu with X icon
$('.close-icon').click(function() {
  $('.main-content').toggleClass('push-open push-close'); 
  $('.menu-icon').toggleClass('push-open push-close');
});

//Close menu on link click
$('.menu a').click(function() {
  $('.main-content').toggleClass('push-open push-close'); 
  $('.menu-icon').toggleClass('push-open push-close');
});

// Close with esc key
$(document).keyup(function(e) {
  if (e.keyCode == 27) { // escape key maps to keycode `27`
    if( $('.main-content').hasClass('push-open') ){
      $('.main-content').addClass('push-close');
      $('.main-content').removeClass('push-open');
    }
    if( $('.menu-icon').hasClass('push-open') ){
      $('.menu-icon').removeClass('push-open');         
      $('.menu-icon').removeClass('push-close');
    }
  }
});

Answer 1

看看这个：

(function(){

    //Mobile Push menu

    //var $mainContent = $('.main-content');
    //var $menuIcon = $('menu-icon');
    var $toggleContent = $('.main-content, .menu-icon');

    $('.menu-icon, .close-icon, .menu a').on('click', function() {
        toggleOpen(); 
    });

    // Close with esc key
    $(document).keyup(function(e) {
      var keyCode = e.which || e.keyCode || e.code;
      if (keyCode === 27) { // escape key maps to keycode `27`
          toggleOpen(); 
      }
    });

    function toggleOpen(){
        if($toggleContent.hasClass('push-open') ){
            $toggleContent.removeClass('push-open').addClass('push-close');
        }else{
            $toggleContent.removeClass('push-close').addClass('push-open');
        }
    }

})(); // End mobilePush

我喜欢模块样式的地方在于，它允许您在函数和事件范围之外声明变量，例如$toggleContent，可以在该模块内部使用，而不会弄乱全局命名空间。

使用 jQuery，您还可以将操作和方法链接在一起，例如 $toggleContent.removeClass('push-open').addClass('push-close');，这绝对有助于提高可读性并消除冗余代码行。

我使用自己的“切换”功能的原因是因为您同时切换了'push-open' 和'push-close'。当我在控制台中观看时，它同时添加/删除了两个类。我怀疑您想删除一个并添加另一个。此外，您可以使用自己的函数添加可能派上用场的回调。

希望有帮助

更新

完全删除了mobilePush，因为它没有必要，并添加了.which。

"event.which 属性规范了 event.keyCode 和 event.charCode。 键盘按键输入建议观看 event.which。”

我正在阅读的一件事是 KeyboardEvent.which 已被贬值，现在可以使用event.key（获取角色）或event.code。建议这样做：

var keyCode = e.which || e.keyCode || e.code

如果你仍然需要支持 IE9 以下的任何东西——上帝保佑——，.keyCode 可以工作，但.which 不行。

Answer 2

您的解决方案效果不佳，滚动时您的两个图标都丢失了。页面滚动上的菜单图标和菜单滚动上的关闭图标。
您正在使用一个通用类，这会给您的样式添加混淆。
您正在切换两个类，而您只需要一个默认样式和一个“切换”类。

根本没有JS怎么办？

• 0行JS
• 用于切换状态的复选框
• label 元素来切换我们的复选框
• 动画取决于复选框的:checked 状态
• 在 CSS 中使用通用兄弟组合 ~ 来定位所有需要的元素，例如 #over、#menu、#page...，它们是复选框的下一个兄弟。

给你

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

/*QuickReset*/ *{margin:0;box-sizing:border-box;} /* Don't transition on "*" !! */
html,body{height:100%;font:14px/1.4 sans-serif;}

/* === CLOSED STYLES === (in order of HTML apperance :D ) */

/* CHECKBOX USED AS MENU TOGGLER */
#ckb { display: none; } /* Hide checkbox button */

/* MENU-BUTTON - notice it's placement in HTML */
#bttn {
  position: fixed;
  z-index: 2;
  top: 0px;
  left: 0px;
  padding: 12px;
  cursor: pointer;
  font-size: 1.3em;
  transition: left .3s, transform .8s; /* will animate left and rotation */
}

/* OVERLAY - To overlay the page and on click closes the menu */
#over{
  position: fixed;
  z-index:1;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  cursor: pointer;
  visibility: hidden;      /* hidden initially */
  opacity: 0;
  transition: opacity .8s; /* we'll transition opacity */
}

/* MENU */
#menu {
  position: fixed;
  overflow-y: auto;
  z-index: 1;
  top: 0;
  left: -285px;
  width: 285px;
  height: 100%;
  background: #fff;
  transition: left .3s;
}
#menu ul {list-style: none; padding: 32px 24px;}
#menu li > * {padding: 5px 10px; display: inline-block; text-decoration: none; color:#f0b; }

/* PAGE AND CONTAINER */
#page {
  position: relative;
  overflow: hidden;
  background: #bbb;
}

.container {
  position: relative;
  left: 0; /* needed since we'll transition this prop */
  background: #eee;
  padding: 32px 56px;
  transition: left .3s;
}

/* === OPEN STYLES === (in order of HTML apperance :D ) */

#ckb:checked ~ #bttn {left: 248px; transform: rotate(180deg);}
#ckb:checked ~ #bttn:before {content: "\f00d";} /* the fa-close character */
#ckb:checked ~ #over {visibility: visible; opacity: 1;}
#ckb:checked ~ #menu {left: 0px;}
#ckb:checked ~ #page > .container {left: 285px;}

<input id="ckb" type="checkbox">
<label for="ckb" id="bttn" class="fa fa-bars"></label>
<label for="ckb" id="over"></label>

<div id="menu">
  <ul>
    <li><label for="ckb">CLICK ME :)</label></li>
    <li><a href="#!">Link One</a></li>
    <li><a href="#!">There's more</a></li>
  </ul>
</div>

<section id="page">
  <div class="container">
    <h1>H1</h1>
    <p style="height:1000px; border:2px dashed gray;">Lorem</p>
  </div>
</section>