Question

Bootstrap有默认的导航栏模块，它有垂直和水平类，并根据屏幕分辨率进行操作（对于移动和小屏幕尺寸，它变得紧凑/垂直）。

检查Link。将屏幕大小调整为小尺寸

现在我希望在发生这种情况时收到通知。换句话说，我想要一个事件处理程序，以便在代码中我知道这发生的时间。是否有任何预定义的事件处理例程，或者我会有自定义代码。 Jquery或javascript都很好

修改只是添加这个东西。我正在寻找一个通用的解决方案，即使没有使用默认宽度值（宽度：767px）。

Answer 1

您可以在窗口的宽度属性

中观看

$(window).resize(function() {
  if($(window).width() < 768){
     //do something
    } 
});

767px是适用于移动设备的bootstrap max-width

Answer 2

这实际上是一个有趣的问题。由于Bootstrap导航栏的样式更改是在CSS中完成的，因此您的选择非常有限（而不是强迫jQuery或JS函数中的样式更改。

理论上，您可以使用“style”属性上的变异观察器将侦听器置于样式属性更改中。如今支持非常好：CanIuse Mutation Observers

SOMEDOMITEM.addEventListener('DOMAttrModified', function(e){
  if (e.attrName == 'style') {
    //check how the style has changed and respond appropriately
  }

但是，最简单的方法是确认导航栏触发的引导断点的水平宽度（取决于你是否覆盖了它在768px处触发）并使用响应断点的JS API：Like Enquire JS < / p>

enquire.register("screen and (max-width: 767px)", {
    match : function() {
           //Do something
    },  
    unmatch : function() {
           //undo something
    }
});

后者的好处与听取浏览器宽度更改相反，您注册的断点与CSS中的格式相同;

Bootstrap导航栏垂直于水平或反之亦然。事件触发

2 个答案: