使用 css 类和 js 切换侧边栏

问题描述 投票：0回答：1

我已经为此苦苦挣扎了一段时间，并且通过谷歌搜索使我到目前为止。 我已经生成了一个页面，尽管有我的脚本，但我无法让侧边栏消失。 请参阅以下内容

html {
  margin-left: 0;
  margin-top: 0;
}

table,
th,
td {
  border: 1px solid;
}

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer';
}

#menubtn {
  grid-area: menubtn;
  position: sticky;
  top: 0;
  height: 3rem;
}

#header {
  grid-area: header;
  background-color: white;
  position: sticky;
  top: 0;
  height: 3rem;
}

#sidebar {
  grid-area: sidebar;
  background-color: white;
  position: sticky;
  height: calc(100vh -3rem);
  align-self: start;
}

#sidebar.hidden {
  display: hidden;
}

content {
  grid-area: content;
}

#footer {
  grid-area: footer;
  background-color: white;
}

h1 {
  color: #330099;
}

h2 {
  color: #330099;
}

h3 {
  color: #330099;
}

a:link,
a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none
}

#content a:link {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

#content a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

a:hover {
  background-color: #06C
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="wvv_grid.css" type="text/css">
  <title>
    Test page for toggling menu
  </title>

</head>

<body>
  <div id="body">
    <div id="menubtn">
      <button id="Button" onclick="myFunc()">Toggle menu</button> </div>
    <div id="header">
      <h1>Welcome to my test page</h1>
    </div>
    <div id="sidebar" ,>
      <ul>
        <li>this</li>
        <li>item</li>
        <li>tests</li>
        <li>the</li>
        <li>button</li>
      </ul>
    </div>
    <div id="content">
      <h2>welcome again!</h2>
      <p>this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.</p>
    </div>
  </div>

  <script defer="true">
    function myFunc() {
      let sb = document.getElementById("#sidebar");
      sb.classList.toggle("hidden");
    }
  </script>
</body>

</html>

我对一些事情感到困惑，这些事情可能有助于为正确的方向提供帮助。不确定我的隐藏类是否定义正确。除此之外，您会注意到我没有使用语义标签。我需要改变什么才能实现这一点？ 非常感谢。

javascript html css class
1个回答
0
投票
  • 使用 
    #
    时使用哈希 (ID) 
    document.querySelector("#sidebar")
    ，而不是使用 
    document.getElementById("sidebar")
    << no 
    #
    • 时 
  • #sidebar.hidden {display: hidden;}
    应该是
    display: none;
  • 避免使用内联 
    on*
    处理程序。使用 
    addEventListener()
    代替，例如：
    document.querySelector("#Button").addEventListener("click", handleSidebar);
  • 在 CSS 中 
    content {
    应该是 
    #content {
  • 在 HTML 中 
    <div id="sidebar" ,>
    应该是 
    <div id="sidebar">

html {
  margin-left: 0;
  margin-top: 0;
}

table,
th,
td {
  border: 1px solid;
}

a:hover {
  background-color: #06C
}

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer';
}

#menubtn {
  grid-area: menubtn;
  position: sticky;
  top: 0;
  height: 3rem;
}

#header {
  grid-area: header;
  background-color: white;
  position: sticky;
  top: 0;
  height: 3rem;
}

#sidebar {
  grid-area: sidebar;
  background-color: white;
  position: sticky;
  height: calc(100vh -3rem);
  align-self: start;
}

#sidebar.hidden {
  display: hidden;
}

#footer {
  grid-area: footer;
  background-color: white;
}

h1, h2, h3 {
  color: #330099;
}

a:link,
a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none
}

#content {
  grid-area: content;
}

#content a:link {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

#content a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Test page for toggling menu
  </title>
</head>

<body>
  <div id="body">
    <div id="menubtn">
      <button id="Button" type="button">Toggle menu</button>
    </div>
    <div id="header">
      <h1>Welcome to my test page</h1>
    </div>
    <div id="sidebar">
      <ul>
        <li>this</li>
        <li>item</li>
        <li>tests</li>
        <li>the</li>
        <li>button</li>
      </ul>
    </div>
    <div id="content">
      <h2>welcome again!</h2>
      <p>this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.</p>
    </div>
  </div>

  <script>
    const elSidebar = document.getElementById("sidebar");
    const elButton = document.getElementById("Button");
    
    const handleSidebar = () => {
      elSidebar.classList.toggle("hidden");
    };
    elButton.addEventListener("click", handleSidebar);
  </script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.