我正在尝试使用Bootstrap 3来创建一个响应站点。我正在使用他们的Dashboard示例作为起点。
该示例在768 px处有一个断点,因此顶部导航栏从“汉堡包”菜单按钮变为导航项的水平列表。
基于this和this,我尝试绑定到button元素上的show/hide.bs.collapse事件,但没有效果。是否有办法绑定到事件或以某种方式侦听何时到达断点?
我已经用相关的部分设置了一个JSFiddle(移动垂直滑块来改变导航栏)。
$( ".navbar-toggle" ).on( "show.bs.collapse", function() {
alert( "hamburger show" );
} )
.on( "hide.bs.collapse", function() {
alert( "hamburger hide" );
} );
3条答案
按热度按时间4nkexdtk1#
这里有一个我最近读到的简洁的解决方案,它对这样的情况非常有效:https://www.fourfront.us/blog/jquery-window-width-and-media-queries
基本上,你可以使用jQuery来测试只适用于特定断点的CSS规则。因此,例如,如果你想在768px处触发一些东西,当你的汉堡包被设置为消失时,你编写了一些使用媒体查询的CSS,你可以这样做:
看看小提琴:http://jsfiddle.net/hq651vjy/2/
72qzrwbm2#
与断点无关,但与Google关键字搜索相关:这对我在Bootstrap 4.6.x版上起作用:
xwbd5t1u3#
如果您只是在寻找断点,则可以侦听
resize
事件,然后对它执行您希望执行的操作。如果用户不太快地调整窗口大小,这种解决方案就可以工作。让我知道这是否适合你。