Question

希望能在这里找到一些帮助，因为我不熟悉网页设计。只是想知道为什么我的手风琴按钮不起作用？在.container中单击时，它应该运行我的动画并显示我的<ul>。现在动画有效，但我似乎无法操纵我的CSS并将display:block更改为display:none。

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}

<html>

<head>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>
  <script>
    var acc = document.getElementsByClassName("container");
    acc.onclick = function() {
      var panel = getElementsByClassName("links");
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>

</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul class="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

Answer 1

我发现jQuery sintaxis更容易。

希望有所帮助

＆＃13;

$('.container').click(function(){
      var panel = $('#links');

      if (panel.css('display') === "block") {
        panel.css('display',"none");
      } else {
        panel.css('display',"block");
      }
})

＆＃13;

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>

<head>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>
</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul class="links" id="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

＆＃13;

Answer 2

这可能有帮助

＆＃13;

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}

＆＃13;

<html>

<head>

 
  <script>
    var acc = document.getElementsByClassName("container");
     function myFunction(x) {
       x.classList.toggle("change");
      var panel = document.getElementById("links");
      console.log(panel.style.display);
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>

</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul id="links" class="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

＆＃13;

CSS手风琴菜单按钮

2 个答案: