jQuery清理

一般来说，我对jQuery和JavaScript是相当陌生的

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

任何建议都很好

可以看到完整的代码：

看看这个：

(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

，因为它是不必要的，并添加了

。其中

“event.which属性规范化event.keyCode和event.charCode。 建议观看event.which以进行键盘键输入。“

我读到的一件事是KeyboardEvent。它已被折旧，现在可以使用

event.key

（获取字符）或

event.code

。建议执行以下操作：

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

---

如果您仍然必须支持IE9以下的任何内容（但愿上帝禁止），

.keyCode

将起作用，但不会

。这
您的解决方案工作得不太好，在滚动时您会丢失两个图标。页面滚动上的菜单图标和菜单滚动上的关闭图标。

您使用的是一个常规类，这会给您的样式设置带来混乱。

您正在切换两个类，而您只需要一个默认样式和一个“切换”的类

没有JS怎么办？

0行JS
用于切换状态的复选框
标记
元素以切换复选框
根据复选框的
：选中状态设置动画

在CSS中使用通用同级组合符
~
以所有需要的元素为目标，如
#over
，
#菜单
，
#页面
。。。复选框的下一个兄弟

给你


导入url（//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css）；
/*QuickReset*/*{边距：0；框大小：边框框；}/*不要在“*”上转换*/
html，正文{高度：100%；字体：14px/1.4无衬线；}
/*==闭合样式===（按HTML外观顺序：D）*/
/*用作菜单切换器的复选框*/
#ckb{显示：无；}/*隐藏复选框按钮*/
/*菜单按钮-注意它在HTML中的位置*/
#bttn{
位置：固定；
z指数：2；
顶部：0px；
左：0px；
填充：12px；
光标：指针；
字体大小：1.3em；
变换：左.3s，变换.8s；/*将设置左和旋转的动画*/
}
/*覆盖-覆盖页面，单击关闭菜单*/
#结束{
位置：固定；
z指数：1；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.6）；
光标：指针；
可见性：隐藏；/*最初隐藏*/
不透明度：0；
转换：不透明度.8s；/*我们将转换不透明度*/
}
/*菜单*/
#菜单{
位置：固定；
溢出y：自动；
z指数：1；
排名：0；
左：-285px；
宽度：285px；
身高：100%；
背景：#fff；
过渡：左。3s；
}
#菜单ul{列表样式：无；填充：32px 24px；}
#菜单li>*{填充：5px 10px；显示：内联块；文本装饰：无；颜色：#f0b；}
/*页面和容器*/
#页面{
位置：相对位置；
溢出：隐藏；
背景:#bbb ;；
}
.集装箱{
位置：相对位置；
左：0；/*需要，因为我们将转换此道具*/
背景：#eee；
填充：32px 56px；
过渡：左。3s；
}
/*==打开样式===（按HTML外观的顺序：D）*/
#ckb:选中~#bttn{左：248px；变换：旋转（180度）；}
#ckb:checked ~#bttn:before{content:“\f00d”}/*fa close字符*/
#ckb:选中{可见性：可见；不透明度：1；}
#ckb:选中~#菜单{左：0px；}
#ckb:选中~#page>.container{left:285px；}



点击我：）



H1
Lorem

为什么不创建一个普通类？这样您只需要一个
$（'.menu_class'）。单击（function（）{$（'.closing_class'）。toggleClass（'push-open-push-close'）；}）@JamesJohnston&Heck-你根本不需要两个类。只有一个：）@RokoC.Buljan？我评论了他应该如何使用一个通用类来切换某些东西。修正了，因为我所做的只是复制了他以前的代码，但我用了一个更好的例子更新了它。@JamesJohnston不，你的建议没问题，我只是说有
“推-开-推-关”
很奇怪。您只需要其中一个（从逻辑上讲，默认样式是-thinking JS last-始终处于打开/可见状态。只需要a
。push close
即可：））因此您有三个不同的单击处理程序，都运行相同的函数——为什么不将其移动到命名函数，并创建一个类似的单击处理程序呢`$(“.menu icon、.close icon、.menu a”）。打开（“单击”，函数（）{…}）这样做，您就不会复制功能。看看为什么要全局公开
mobilePush
？而且您的示例也没有任何意义…
我怀疑您想删除一个，然后添加另一个
…这正是您的代码所做的：）您在设计
切换打开
功能方面做得太过火了。您所需要的只是
$toggleContent.toggleClas
var keyCode = e.which || e.keyCode || e.code