Question

因此，我正在尝试创建一个侧边栏，该侧边栏在单击按钮时会折叠并展开。

我创建了一个jsfiddle供您查看：https://jsfiddle.net/4er26xwp/1/

我在这里遇到的问题：

document.getElementsByClassName("spanclass").setAttribute("style","opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");

点击按钮时，我试图更改所有spanClasses的不透明度。因此，当边栏展开时，跨度可见，而当边栏折叠时，不显示跨度类。我在做什么错了？

编辑：我发现是否这样做：文档.getElementsByClassName("spanclass")[1].setAttribute("style","opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");更改了一个跨度，但是如何同时更改所有跨度？

Answer 1

使用document.querySelectorAll而不是document.getElementsByClassName，那么您需要循环所有类并为其赋予所需的样式，这是完成的方式：

顺便说一句：您也可以使用document.getElementsByClassName并执行相同的循环。

var open = false;

function navAction() {

if (open == true) {
open = false;
var s = document.getElementById("sidebar");
s.className -= " w160";
document.getElementById("main-container").style.marginLeft = "60px";
document.getElementById("main-container").style.transition = "all 0.2s";
var spanclass = document.querySelectorAll(".spanclass");
for (var i = 0; i < spanclass.length; i++) {
        spanclass[i].setAttribute("style","opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");
    }
}

else if (open == false) {
open = true;
var s = document.getElementById("sidebar");
s.className += " w160";
document.getElementById("main-container").style.marginLeft = "160px";
document.getElementById("main-container").style.transition = "all 0.2s";
var spanclass = document.querySelectorAll(".spanclass");
for (var i = 0; i < spanclass.length; i++) {
        spanclass[i].setAttribute("style","opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
    }
  } 
}

body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
}

#main-container {
  margin-left: 60px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}

#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  /*
  transition: all .3s ease-in-out;
  */
  overflow: hidden;
}
#sidebar img {
  /*
  width: 60%;
  */
  width: 50px;
  height: auto;
  display: block;
  margin-left: 3px;
  margin: 0 auto;
}
#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 20px;
  color: #000000;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
  width: 60px;
  white-space: nowrap;
  /*
  transition: all .2s ease-in-out;
  */
}
#sidebar a span {
  opacity: 0;
  /*
  transition: all .2s ease-in-out;
  */
}
#sidebar.w160:hover a span {
  opacity: 0.2!important;
}
#sidebar.w160 a:hover span {
  opacity: 1!important;
}
#sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
  width: 160px;
}

#sidebar a:hover,
#sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
  width: auto;
}

#sidebar a.active {
  background: #e6e6e6;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.w160{
  width:160px!important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="main-container">
<div id="sidebar">
<a href="newsale.php">➕<span class="spanclass">Nytt salg</span></a>
<a class="active" href="#">?<span class="spanclass">Hjem</span></a>
<a href="sales.php">?‍♂<span class="spanclass">Mine salg</span></a>
<a href="account.php">?<span class="spanclass">Konto</span></a>
<a href="logout.php">?<span class="spanclass">Logg ut</span></a>
</div>

<div id="main">
  <button class="openbtn" onclick="navAction()">☰ Open Sidebar</button>  
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</div>
</body>
</html>

单击按钮折叠/展开侧栏

1 个答案: