Question

使用媒体查询我创建了一个折叠的导航栏，而我的徽标位于底部。用enquire.js我先写了最后一个li。如何才能在第一场比赛中执行前置，以防止切换一个li，每个匹配到右边？

prependLogo : function() {

        query = "screen and (max-width: 979px)";
            handler = {
                match: function() {
                    $(.nav-collapse .nav).prepend($("li:last"));
                },

                unmatch : function() {

                },
            };

            enquire.register(query, handler);
    },

Answer 1

有两种方法可以解决这个问题。一种是利用查询的unregister方法。另一种方法是使用setup回调和deferSetup标记。

setup回调只被调用一次。通常在注册查询时立即调用它，但是与deferSetup标志结合使用，设置会延迟到查询首次匹配（不幸的是查询期望始终存在match回调，因此我们将只为此提供一个空函数：

enquire.register("screen and (max-width: 979px)", {
  setup : function() {
    $(.nav-collapse .nav).prepend($("li:last"));
  },
  deferSetup : true, 

  match : function() {}
});

unregister方法按预期方式执行，取消注册查询。如果我们在匹配回调中调用unregister，我们也可以达到相同的效果：

enquire.register("screen and (max-width: 979px)", {
  match : function() {
    $(.nav-collapse .nav).prepend($("li:last"));
    //note this unregisters *all* handlers for this mq (if you have more than one) 
    enquire.unregister("screen and (max-width: 979px)"); 
  }
});

以下是一个展示两种方法的工作示例：http://codepen.io/WickyNilliams/pen/vFLEH

另外，请注意上面的代码中，您没有使用var关键字初始化变量。这在JS中是不好的做法，因为没有var声明的任何变量都附加到全局范围，这可能不是你想要的：）

如何仅在第一场比赛时只选择选择器？

1 个答案: