Question

我的代码如下：

function dropright() {
  var pos = 0;
  var menu = document.getElementById("menuBar");
  var t = setInterval(move, 10);

  function move() {
    if (pos >= 75) {
      clearInterval(t);
    } else {
      pos += 1;
      menu.style.left = pos + "px";
    }
  }
};

* {
  margin: 0px;
}
#container {
  width: 150px;
  height: 600px;
  left: -75px;
  position: relative;
}
#menuBar {
  width: 150px;
  height: 100%;
  position: absolute;
  float: left;
  background-color: red;
}

<body>
  <div id="container" onclick="dropright()">
    <div id="menuBar"></div>
  </div>
</body>

我想让我的菜单栏从容器点击左侧出现。另外我想让它以同样的方式消失。但这没有任何作用。我应该为这个或关键帧使用JS吗？

Answer 1

我会这样做：

添加要打开的课程。
使用过渡，而不是关键帧。

<强>段

＆＃13;

$(function() {
  $(".dropRight").click(function(e) {
    e.preventDefault();
    $("#menuBar").toggleClass("open");
  });
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
  text-decoration: none;
  font-family: 'Segoe UI';
}
.dropRight {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #ccc;
  color: #333;
  border-radius: 5px;
  padding-bottom: 7px;
  float: right;
  margin-right: 25px;
  margin-top: 25px;
}
#menuBar {
  position: fixed;
  top: 25px;
  left: -200px;
  width: 200px;
  bottom: 0;
  background-color: #ccf;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
#menuBar.open {
  left: 0;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="container">
  <a href="#" class="dropRight">Open</a>
  <div id="menuBar"></div>
</div>

＆＃13;

我添加了一个 Open ，可用于打开或关闭。 :)

Answer 2

我建议你为元素添加一个点击监听器，然后点击它，添加一个类。动画可以用CSS制作。

＆＃13;

document.getElementById('container').addEventListener('click', function() {
    if(this.className === 'shown') {
        this.className = '';
    } else {
        this.className = 'shown';
    }
});

＆＃13;

* {
    margin: 0px;
}

#container {
    width: 150px;
    height: 300px;
    left: -75px;
    position: relative;
    background: red;
    transition: 0.3s ease left;
    cursor: pointer;
}

#container.shown {
  left: 0;
}

＆＃13;

<div id="container"></div>

＆＃13;

下拉菜单中的关键帧或JScript

2 个答案: