Question

我正在开发一个带有响应滑块菜单的网站。它应该从顶部滑动到底部（在移动视图320x480px上），它适用于MacOSX上的Safari，Windows 8.1上的Chrome-Firefox-Explorer，iPhone iOS上的Safari和Android上的Chrome，但它不能与Explorer一起使用Windows Phone 8.1。触摸打开按钮，它会移动到底部，但是当触摸关闭按钮时，它会滑到顶部然后完全消失（但它应保持调整大小并且可见）。

我尝试使用css，设置“visibility：visible！important”或“display：block！important”，但它不起作用。也许这是一个js问题，但我无法解决它。

这是html：

<div id="wrapper_principale">
  <div id="container_menu">
    <div id="navigazione_principale">
      <div class="riga-nav">
        <a href="info.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/info.svg"><br>info</div></a>
        <a href="news.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/news.svg"><br>news</div></a>
        <a href="marchi.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/marchi.svg"><br>marchi</div></a>
        <a href="mappa.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/menu/piene/map.svg"><br>mappa</div></a>
        <a href="abbigliamento.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Abbigliamento.svg"><br>abbigliamento</div></a>
        <a href="alimentari.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Alimentari.svg"><br>alimentari</div></a>
        <a href="benessere.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Benessere.svg"><br>benessere</div></a>
        <a href="casa.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Casa.svg"><br>casa</div></a>
        <a href="ristorazione.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Ristorazione.svg"><br>ristorazione</div></a>
        <a href="servizi.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Servizi.svg"><br>servizi</div></a>
        <a href="tempo_libero.html"><div class="blocco-nav"><img class="icone-menu" src="immagini/icone/Tempo_libero.svg"><br>tempo libero</div></a>
        <a target="blank" href="http://www.facebook.com/LaTorreSuzzara"><div class="blocco-nav facebook-blocco"><img class="icone-menu facebook" src="immagini/icone/Facebook.svg"></div></a>
        <a href="index.html"><div class="blocco-nav special logo-torre"></div></a>
        <div class="blocco-nav-doppio"><input type="search" id="search" name="search" class="txt" size="20" placeholder="cerca e premi invio..."></div>
        <div class="blocco-nav special menu-button">
        <button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x" id="open-button">
        <span class="lines"></span>
      </div>
    </div>
  </div>
</div>

这是scss规则：

#container_menu {
  position: fixed;
  z-index: 100;
  background-color: $sfondo_menu;
  left: 0;
  top: 0;
  width: 100%;
  height: 356px;
  font-family: Cuprum;
  color: $colore_sfondo_chiaro;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate3d(0,-267px,0);
  -moz-transform: translate3d(0,-267px,0);
  -o-transform: translate3d(0,-267px,0);
  transform: translate3d(0,-267px,0);
  -webkit-transition: -webkit-transform 0.4s;
  -moz-transition: -webkit-transform 0.4s;
  -o-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  -moz-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  -o-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
  transition-timing-function: cubic-bezier(0.7,0,0.3,1);

#navigazione_principale {
white-space: nowrap;
width: 100%;
margin-left: 0px;
margin-top: 0px;
font-size: 16px;
color: $colore_sfondo_chiaro;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

.riga-nav {
    white-space: nowrap;
    width: 100%;
    height: $altezza_navbar;
    position: relative;
    //border-bottom: 1px dashed $colore_sfondo_chiaro;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    &:last-child {
        right: 0px;
        border-bottom: none;
        border-right: none;
    }
}

.blocco-nav {
    width: 25%;
    height: $altezza_navbar;
    float: left;
    //border-right: 1px dashed $colore_sfondo_chiaro;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    background: linear-gradient(to top, transparent 50%, $marrone_scuro_menu 50%);
    background-size: 100% 201%;
    background-position: left bottom;
    border-bottom: 0px solid $arancione_menu;
    transition: all 0.3s ease;

    &:hover {
        //background-color: $marrone_scuro_menu;
        background-position: left top;
        cursor: pointer;
        border-bottom: 10px solid $arancione_menu;
    }
}

.blocco-nav-doppio {
    width: 50%;
    height: $altezza_navbar;
    float: left;
    //border-right: 1px dashed $colore_sfondo_chiaro;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
}

和js：

(function () {
"use strict";
var bodyEl = document.body,
    content = document.querySelector('navigazione_principale'),
    openbtn = document.getElementById('open-button'),
    closebtn = document.getElementById('close-button'),
    isOpen = false;

function toggleMenu() {
    if (isOpen) {
        classie.remove(bodyEl, 'show-menu');
    } else {
        classie.add(bodyEl, 'show-menu');
    }
    isOpen = !isOpen;
}

function initEvents() {
    openbtn.addEventListener('click', toggleMenu);
    if (closebtn) {
        closebtn.addEventListener('click', toggleMenu);
    }
}

function init() {
    initEvents();
}

init();

}());

如果你想检查这是网站（这是一个正在建设中的链接）http://giacomotest.altervista.org/TORRErestyling

有什么建议吗？

在Windows Phone 8.1的资源管理器中，幻灯片菜单消失

0 个答案: