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

主菜单JS无法在IE和Firefox中工作（其他菜单工作）

1 个答案: