Question

我正在使用HTML构建Android应用。我用HTML制作了NavigationDrawer，用javascript我按钮点击显示，然后在<p>点击消失。我正在使用关键帧来制作动画。当我按下按钮时，动画工作（我正在使用-webkit-transform：translateX），当我再次单击该按钮时，动画可以工作，但div不会隐藏。它仍然在屏幕上，但我可以点击它（如指针事件：无;）。有什么问题？

CSS：

@-webkit-keyframes sMenuClose {
    from {
        -webkit-transform: translateX(0%);
    }
    to {
        -webkit-transform: translateX(-100%);
    }
}
@-webkit-keyframes sMenuOpen {
    from {
        -webkit-transform: translateX(-100%);
    }
    to {
        -webkit-transform: translateX(0%);
    }
}
.slidemenu {
    background: transparent;
    height: 100%;
    left: 0px;
    pointer-events: none;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9991;
}

.slidemenu .menu {
    background: #FFF;
    border-right: 1px solid #000;
    color: #333;
    height: 100%;
    overflow: visible;
    pointer-events: visible;
    position: absolute;
    top: 0px;
    -webkit-transform: translateX(-100%);
    width: 80%;
}

.slidemenu .menu.hidden {
    -webkit-animation-name: sMenuClose;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
}

.slidemenu .menu.visible {
    -webkit-animation-name: sMenuOpen;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;
}

HTML：

<html>
    <head>
        ...
    </head>
    <body>
        ...
        <div class="slidemenu">
            <div class="menu">
                <p>Some text</p>
            </div>
        </div>
    </body>
</html>

JS：

window.onload = function() {

    document.querySelector("body div#actionbar div.action ul li.menu a").addEventListener("click", function(e) {
        e.preventDefault();
        if(document.querySelector("body div.slidemenu div.menu").classList.contains("hidden"))
        {
            document.querySelector("body div.slidemenu div.menu").classList.remove("hidden");
        }
        document.querySelector("body div.slidemenu div.menu").classList.add("visible");
    });

    document.querySelector("p").addEventListener("click", function(e) {
        e.preventDefault();
        document.querySelector("body div.slidemenu div.menu").classList.remove("visible");
        document.querySelector("body div.slidemenu div.menu").classList.add("hidden");
    });

};

你能帮助我吗？

Answer 1

我认为你可以通过稍微简单的设置获得你想要的效果。此示例稍作修改以显示此处的演示，但我认为您应该能够轻松地将此按钮转换回您的li菜单项。我将滑道设为浅蓝色，这样也更容易看到。

＆＃13;

function slideMenu_Toggle(){
    var _selector = "body div.slidemenu div.menu";
    document.querySelector(_selector).classList.toggle("visible");
}

window.onload = function() {
    var _selector = ".slidemenu .menu";
    document.querySelector(_selector).addEventListener("click", function(){
        if( this.classList.contains("visible") ) { slideMenu_Toggle(); }
    });

    document.querySelector("#toggle").addEventListener("click", slideMenu_Toggle);
};

＆＃13;

.slidemenu {
  background: transparent;
  height: 100%;
  left: 0px;
  pointer-events: none;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9991;
}

.slidemenu .menu {
  border-right: 1px solid #000;
  color: #333;
  height: 100%;
  overflow: visible;
  position: absolute;
  top: 0px;
  width: 80%;
  pointer-events: visible;

  background: aliceblue;
  -webkit-transition: transform .5s ease;
  -webkit-transform: translateX(-100%);
}

.slidemenu .menu.visible {
  -webkit-transform: translateX(0%);
}

＆＃13;

<div style="text-align: right; margin-top: 3em;">
  <button id="toggle" style="font-size: 2em;">toggle</button>
</div>

<div class="slidemenu">
  <div class="menu">
    <p>Some text</p>
  </div>
</div>

＆＃13;

Answer 2

这是一种解决方法

<script language="JavaScript">

  var TheDivParentContents

  self.window.onload=getDivContents


  function getDivContents(){

    TheDivParentContents=document.getElementById("TheDivParent").innerHTML;

  }


  function OnClickHideDiv(){

    document.getElementById("TheDivParent").innerHTML="";

  }

  function OnClickShowDiv(){

    document.getElementById("TheDivParent").innerHTML=TheDivParentContents;

  }


</script>

<body bgcolor="white">

  <input script=JavaScript type=button onclick="OnClickShowDiv()" value="Show Div">

  <input script=JavaScript type=button onclick="OnClickHideDiv()" value="Hide Div">

  <span id=TheDivParent>

    <div>
      some text
    </div>

  </span>

</body>

请注意，我将要隐藏的div放在Span标记内。并且脚本中的函数将使用span标记将div的innerhtml保存为全局变量。希望这对您有用。

动画后Div仍保留在屏幕上

2 个答案: