主菜单JS在IE和Firefox中不起作用(其他菜单起作用)

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不支持转换。