Question

我对jQuery和JavaScript一般都很陌生。

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

任何建议都会很棒。

可以看到完整代码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');等操作和方法链接在一起，这肯定有助于提高可读性并消除冗余的代码行。

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

希望有所帮助

<强>更新

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

＆＃34; event.which属性规范化event.keyCode和event.charCode。建议观看event.which键盘输入键。＆＃34;

我读的一件事是 KeyboardEvent.which 已被折旧，现在可以使用event.key（获取角色）或event.code 。建议做以下事情：

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

如果您仍然需要支持IE9以下的任何内容 - 上帝禁止 - ，.keyCode将有效，但不会.which。

Answer 2

你的解决方案效果不佳，滚动你失去了你的图标。页面滚动上的菜单图标和菜单上的关闭图标滚动您正在使用一般类，这会给您的造型增加混乱你正在切换两个类，而你需要的只是一个默认样式和一个单独的＆＃34;切换＆＃34;类。

根本没有JS怎么样？

0行JS
用于切换状态的复选框
label元素切换我们的复选框
动画取决于复选框:checked州
在CSS中使用General Sibling Combinator ~来定位所有需要的元素，例如#over，#menu，#page ...这些是复选框＆＃39; s下一个兄弟姐妹。

在这里

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery清理

2 个答案:

根本没有JS怎么样？