如何在元素轉換時添加事件偵聽器？

我正在使用Bootstrap 3開發一個響應式網站，其中有很多功能，其中之一就是當網站在移動設備上顯示時，會顯示一個下拉菜單（在桌面上，我有一個正常的菜單，並在移動版本上進行了轉換進入一個崩潰的下拉菜單）現在我的問題是，我需要一個事件監聽器，當這個正常的菜單被轉換成這個崩潰下拉菜單時能夠偵聽，有沒有辦法做到這一點？非常感謝。如何在元素轉換時添加事件偵聽器？

HTML代碼：

<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; 
}

所以基本上我怎麼可以添加事件偵聽器時，我的菜單被改造成一個崩潰的下拉菜單中檢測？

來源

2015-05-29 FabioEnne

一個填充工具你就不能使用window.matchMedia？類似於：'if（window.matchMedia（「YourMediaRule」）。）匹配）...' –

您可以使用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

來源

2015-05-29 16:59:33

如何在元素轉換時添加事件偵聽器？

回答

相關問題