Question

我正在使用具有许多功能的Bootstrap 3开发一个响应式网站，其中一个是当手机上显示网站的时候会显示一个下拉菜单（在桌面上我有一个普通的菜单，在移动版上它转换为折叠下拉菜单）现在我的问题是我需要一个事件监听器，当这个普通菜单转换成这个折叠下拉菜单时，能够监听，有没有办法做到这一点？非常感谢。

HTML CODE：

<div class="container-sm visible-sm visible-xs container visible-md visible-lg">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Left Menu</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <div class="navbar-collapse collapse">
        <div id="sideNavBox" class="ms-dialogHidden ms-forceWrap ms-noList">
            <!-- A lot of code that I included in the dropdown menu -->
        </div>
    </div>
</div>

CSS：

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }

.navbar-toggle {
  position: relative;
  padding: 9px 10px;
  margin-top: 8px;
  margin-bottom: 8px;
  background-color: rgb(241, 241, 241);
  background-image: none;
  border: 1px solid rgb(241, 241, 241);
  border-radius: 4px;
  width: 695px;
}

所以我基本上如何添加一个事件监听器来检测我的菜单何时转换为折叠下拉菜单？

Answer 1

您可以使用window.matchMedia创建此类活动，请参阅minimal code example here：

var mql = window.matchMedia('only screen and (min-width: 768px)'),
    handleMQL = function(mql) {
        if (mql.matches) {
            console.log('MATCH');
            // Media query does match
            // fire your on event here 

        } else {
            console.log('UNMATCH');
            // Media query does not match anymore
            // fire your off event here 
        }
    };


mql.addListener(handleMQL);
// this is optional (in case you need the state on page load)
// see info below.
handleMQL(mql);

当目标媒体查询的状态发生变化时，侦听器将触发。如果您需要页面加载时媒体查询的状态，请创建一个处理状态更改的函数，您也可以单独调用该函数，如上例所示。

如果您需要较旧的浏览器支持，可以使用像matchMedia.js这样的polyfill

如何在转换元素时添加事件侦听器？

1 个答案: