javascript - 使用 Javascript 隐藏和显示导航栏

Question

我的页面左侧有一个小导航栏。您在其左侧有 MainNavigation 项目符号点，然后在右侧，当您单击其中一个点时，您将看到一个包含子页面链接的列表。我在导航栏的右侧添加了一个小按钮，这样我就可以关闭它并为实际内容提供更多空间。

现在是棘手的部分。我希望当菜单关闭时，主导航项不会刷新页面或转到任何链接。他们应该再次打开右侧菜单。

这里无法提供完整的代码，这是我所做的事情

$(document).ready(function() {
  $("#hideButton").click(function() {
    $("#sidebar-content").toggle("slide");
  });
});

.leftnavigation {
  height: 100vh;
  position: fixed;
}

.icon-bar div {
  padding: 8px;
  display: block;
  transition: all 0.3s ease;
  color: white;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigation" class="leftnavigation">
  <div class="icon-bar" style="float: left; height: 100%; background-color: #2D4400">
    <div>Test</div>
  </div>
  <div id='sidebar-content' style="float:left; width: 215px; background-color: #385400; height: 100%;">
    <a id="hideButton"></a>
    <li><a>Test</a></li>
  </div>

</div>

而不是 <a>我使用的标签是 <p:link>来自 Primefaces 的标签。

Answer 1

我就是这样做的

(function(){
  var buttonList = document.getElementsByClassName("toggle");
  for(var index = 0; index < buttonList.length; index++) {
    buttonList[index].addEventListener("click", function(event){
      var nav = document.getElementById("sidebar-content");
      if(nav.classList.contains("open")) nav.classList.remove("open");
      else nav.classList.add("open");
    });
  }
})();

#navigation {
  position: fixed;
  bottom: 0;
  left: 0;
  top: 0;
}

#sidebar-content {
  background-color: #385400;
  transition: all 1.2s; 
  overflow: hidden;
  height: 100%;
  float: left;
  width: 0;
}

#sidebar-content.open {
  width: 215px;
}

.icon-bar {
  background-color: #2D4400;
  height: 100%;
  float: left;
}

.icon-bar>div {
    transition: all 0.3s ease;
    font-size: 18px;
    display: block;
    padding: 8px;
    color: white;
}

.toggle {
  cursor: pointer;
}

<div id="navigation">
  <div class="icon-bar">
    <div class="toggle">Test</div>
  </div>
  <div id="sidebar-content">
    <a id="hideButton"></a>
    <ul>
      <li>
        <a>Test</a>
      </li>
    </ul>
  </div>
</div>