代码之家 › 专栏 › 技术社区 › Daniel Theman

jQuery清理

push menu mobile jquery

Daniel Theman · 技术社区 · 7 年前

一般来说,我对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');
    }
  }
});

2 回复 | 直到 7 年前

Jeramiah Harland 7 年前

看看这个:

(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.key event.code

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

.keyCode .

Roko C. Buljan 7 年前

你的解决方案效果不太好,滚动时你会失去两个图标。页面滚动上的菜单图标和菜单滚动上的关闭图标。

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