メインメニューIEとFirefox（他のメニューが動作する）でJSが動作しません

Question

ボタンをクリックするとメインメニューとユーザーメニューが左側からスライドします。私はまた、上からスライドする検索エリアを持っています。すべてがChromeで動作しますが、メインメニューはIEやFirefoxでは機能しませんが、

私はIEとFirefoxでページをデバッグしようとしたが、何も起こらない。

編集：私の仕事でもう一度試してみると、時々動作します。

これは、アクションをトリガーするセレクタを備えたJSの一部です。

// MAIN MENU XS  
var mainMenu = document.getElementById('main-menu'), 
mainMenuTrigger = document.getElementById('main-menu-trigger'), 
body = document.body; 

mainMenuTrigger.onclick = function() { 
    alert('hlavní menu'); 
    ... 
}; 

// USER MENU XS  
var userMenu = document.getElementById('user-menu'), 
userMenuTrigger = document.getElementById('user-menu-trigger'), 
body = document.body; 

userMenuTrigger.onclick = function() { 
    ... 
}; 

これはHTMLページの一部です。

<div class="row"> 
     <div id="header-menu-icon" class="col-xs-2 hidden-sm hidden-md hidden-lg"> 
      <button><span id="main-menu-trigger" class="glyphicon glyphicon-menu-hamburger"></span></button>       
     </div> 
     <div id="header-user-icon" class="col-xs-2 show hidden-sm hidden-md hidden-lg"> 
      <button id="user-menu-trigger"><span class="glyphicon glyphicon-user"></span></button> 
      <button id="user-menu-logged-trigger" class="hide"><span class="glyphicon glyphicon-user"></span></button> 
     </div> 
     <div id="header-search-icon" class="col-xs-2 show hidden-sm hidden-md hidden-lg"> 
      <button id="search-trigger"><span id="search-icon" class="glyphicon glyphicon-search"></span></button> 
     </div> 
     <div class="search-area hidden-xs col-sm-3"> 
       <form action="http://www.csfd.cz/hledat/" method="get" novalidate=""> 
        <div class="input-group">        
         <input id="mainSearch" type="text" name="q" class="form-control" placeholder="Hledat"> 
          <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
          <button class="btn btn-default hidden-sm hidden-md hidden-lg" id="close" type="button"><span class="glyphicon glyphicon-remove"></span></button> 
        </div> 
        <a class="advanced-search hidden-xs" href="http://www.csfd.cz/podrobne-vyhledavani/">podrobné vyhledávání →</a> 
       </form> 
     </div> 
     <div class="col-xs-6 col-sm-12 menu-col"> 
       <div id="user-area"> 
         <div id="user-menu" class="main-menu slide slide-vertical slide-left"> 
          <h4 class="hidden-xs">Uživatelská zóna</h4> 
          <ul> ... 
          </ul> 
         </div> 
         <div id="user-menu-logged" class="main-menu slide slide-vertical slide-left hide-menu"> 
           <img src="./img/user-photo.jpg" class="img-responsive user-photo hidden-xs" alt="User Photo"> 
           <ul> ... 
           </ul> 
         </div> 
       </div> 
     </div> 
</div> 
<div class="row menu-row"> 
     <div class="col-xs-6 col-sm-12"> 
       <div id="main-menu" class="main-menu slide slide-vertical slide-left"> 
         <ul> ... 
         </ul> 
        </div> 
     </div> 
</div> 

スライドメニューのCSSファイル：

.slide { 
    position: relative; 
} 

.slide-vertical { 
    width: 240px; 
    height: 100%; 
    top: 0; 
    z-index: 1000; 
} 

.slide-horizontal { 
    width: 100%; 
    left: 0; 
    z-index: 1000; 
    overflow: hidden; 
} 

#user-area .slide-left { 
    left: -350px; 
     top: 17px; 
} 

#user-area #user-menu-logged.slide-left { 
    left: -350px; 
     top: 16px; 
} 

.slide-left { 
    left: -300px; 
     top: 15px; 
} 

.slide-right { 
    right: -240px; 
} 

#user-area .slide-left.slide-open { 
    left: 5px; 
     top: 17px; 
} 

#user-area #user-menu-logged.slide-left.slide-open { 
    left: 5px; 
     top: 16px; 
} 

.search-area.slide { 
    height: 0; 
} 

.slide-top.slide-open { 
    height: 40px; 
} 

.slide-left.slide-open { 
    left: 5px; 
     top: 15px; 
} 

.slide-right.slide-open { 
    right: 0px; 
} 

.slide-top { 
    top: -150px; 
} 

.slide-bottom { 
    bottom: -150px; 
} 

.slide-top.slide-open { 
    top: 0px; 
} 

.slide-bottom.slide-open { 
    bottom: 0px; 
} 

.slide-push { 
    left: 0; 
} 

.slide-push-toright { 
    left: 240px; 
} 

.slide-push-toleft { 
    left: -240px; 
} 

.slide-push-tobottom { 
    top: 0px; 
} 

.slide, 
.slide-push { 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 

Answer 1

IE 8、IE 9の移行をサポートしていません。