0

使用媒体查询，我创建了一个可折叠的导航栏，而我的徽标位于底部。使用 enquire.js，我将最后一个 li 放在前面。如何仅在第一个匹配项上执行 prepend 以防止切换一个 li，每个匹配项向右？ 

prependLogo : function() {

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

                unmatch : function() {

                },
            };

            enquire.register(query, handler);
    },
4

1 回答 1

0

有两种方法可以处理这个问题。一是利用查询unregister法。另一种是利用setup回调和deferSetup标志。

回调只被setup调用一次。通常在注册查询时立即调用它，但结合deferSetup标志，设置会延迟到第一次匹配查询（不幸的是，inquire 期望总是有一个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都附加到全局范围，这可能不是您想要的 :)

于 2013-12-02T16:15:45.477 回答