Question

我已将以下侧边栏导航实现为一个简单的管理员。我已经让它工作并向右侧移动。我想使用单个按钮而不是单独的关闭和打开按钮使其显示和消失。我尝试使用onToggle函数修改JS，如果isOpen为null，它将打开面板，然后将isOpen设置为true，然后在下次运行时，它将删除isOpen。我在JS很新，这次失败所以我想我会在这里问。如何通过一个按钮让这只小狗出现并消失？

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

谢天谢地。

Answer 1

<!DOCTYPE html>
<html>
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 60px;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
<body>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>


<script>
function openNav() {
    var e = document.getElementById("mySidenav");
    if (e.style.width == '250px')
    {
        e.style.width = '0px';
    }
    else 
    {
        e.style.width = '250px';
    }
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
</script>

</body>
</html>

这是相同的代码，在openNav（）方法中几乎没有修改。要使用按钮触发sideNavbar，需要在触发sideNavBar之前和之后显示。所以我已将视图按钮移到顶部，我修改了top的{{1}}属性，以便在激活后仍然可以看到触发按钮

您可以在此处查看此操作：https://jsfiddle.net/ngohrvk1/

Answer 2

这段代码将帮助你，我已经在元素上创建了一个函数并保存了data-isshown属性，以获取元素是否显示，我们也可以根据宽度来决定这个，但这是更通用的方法

function toggleNav() {
  var element = document.getElementById("mySidenav")
  var shown = element.getAttribute("data-isshown");
  if (shown == "true") {
    element.setAttribute("data-isshown", "false");
    element.style.width = "0";

  } else {
    element.setAttribute("data-isshown", "true");
    element.style.width = "250px";
  }
}

整个代码看起来像这样

＆＃13;

function toggleNav() {
  var element = document.getElementById("mySidenav")
  var shown = element.getAttribute("data-isshown");
  if (shown == "true") {
    element.setAttribute("data-isshown", "false");
    element.style.width = "0";

  } else {
    element.setAttribute("data-isshown", "true");
    element.style.width = "250px";
  }
}

＆＃13;

body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
  color: #f1f1f1;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px !important;
  margin-left: 50px;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

＆＃13;

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="toggleNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="toggleNav()">☰ open</span>

＆＃13;

Answer 3

我知道问题是用JavaScript标记的，您可能不想更改标记或添加新元素。但如果可以的话，这里有一个纯CSS解决方案。

＆＃13;

ionic start Beta blank

ionic platform android

ionic build android

＆＃13;

body {
  margin: 0;
}
.sidebar-toggle {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 10px;
  background: red;
  color: white;
}
#sidebar-toggle-input {
  display: none;
}
#sidebar-toggle-input+label:before {
  content: "➡️";
}
#sidebar-toggle-input:checked + label:before {
  content: "❌"
}
.sidebar {
  position: fixed;
  width: 200px;
  transition: 0.3s;
  background: blue;
  height: 100vh;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}
#sidebar-toggle-input:checked ~ .sidebar {
  transform: none;
}

＆＃13;

带有单个按钮的侧边栏导航切换

3 个答案: