关闭 canvas 菜单 - onclick 功能问题

Question

我目前正在处理一个个人项目 - 对于前端世界来说还很陌生。

我有一个关闭-canvas 菜单中的幻灯片工作，但是我在第一次单击切换按钮后无法再次打开它。

我正在使用 onclick 函数，然后使用 CSS 构建进出视口的过渡。

不确定我哪里出错了，希望能得到一些帮助！

这是我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <title>Grid Challenge</title>
</head>
<body>

    <div id="sidebar">
       <div class="close">
        <i class="material-icons" onclick="hide()">
            close
            </i>
        </div>
        <ul>
            <li>Home</li>
            <li>Shop</li>
            <li>Blog</li>
            <li>About us</li>
            <li>Contact Us</li>
        </ul>
    </div>

          <header>
         <section class="logo">
            <div id="logo"><h3>minera.</h3></div>
            </section>
          </header>

          <section class="header-bottom">
            <div class="icons">
                <a href=""><i class="material-icons">search </i></a>
                <a href=""><i class="material-icons">person_outline</i></a>
                <a href=""><i class="material-icons">shopping_cart</i></a>
            </div>

            <div class="toggle-btn" onclick ="show()">
                <span> </span>
                <span> </span>
                <span> </span>
            </div>
        </section>

<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit-icons.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

CSS


 @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body{
margin:0;
height:100vh;
font-family: "Poppins";
color:#3e3e3e;
}

header{
display: flex;
margin:3em;
justify-content: center;
}

#logo h3{
font-family:"poppins";
font-size:20px;
}

.header-bottom{
display:flex;
justify-content: center;
align-items:flex-start;
margin-top:-50px;
}


.icons{
display:inline-flex;
}

.icons a i {
    margin-left:8px;
    margin-right:8px;
    color:black;
}

.toggle-btn span{
width:25px;
height:4px;
background-color: black;
margin-top:2px;
display:block;
}


#sidebar{
position: absolute;
width:220px;
height:100%;
background:white;
left:-250px;
transition: .4s;
}

#sidebar ul li{
list-style:none;
padding-top:20px;
padding-bottom:20px;
}

#sidebar.active{
left:0;
}

#sidebar.hide{
    left:-250px;
}

.close{
display: flex;
justify-content: end;
}

JS

function show(){
document.getElementById('sidebar').classList.toggle('active');
}

function hide(){
document.getElementById('sidebar').classList.toggle('hide');
}

Answer 1

您只需切换一个 class 即可获得所需的效果。只设置一个切换函数，这将切换class（不存在时添加class，存在时删除）

Html（仅限有切换功能的按钮）

<i class="material-icons" onclick="toggle()">
  close
</i>

<div class="toggle-btn" onclick ="toggle()">
  <span> </span>
    <span> </span>
    <span> </span>
</div>

Javascript

function toggle(){
  document.getElementById('sidebar').classList.toggle('active');
}

Css

#sidebar {
  position: absolute;
  width:220px;
  height:100%;
  background:white;
  left:-250px;
  transition: .4s;
}

#sidebar.active{
  left:0;
}

Answer 2

点击 X（关闭按钮）调用 show()。请注意 CSS 已缩小（与 CSS 所提及的问题相同）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
    <title>Grid Challenge</title>
</head>
<style>
    @import url(https://fonts.googleapis.com/css?family=Poppins&display=swap);body{margin:0;height:100vh;font-family:Poppins;color:#3e3e3e}header{display:flex;margin:3em;justify-content:center}#logo h3{font-family:poppins;font-size:20px}.header-bottom{display:flex;justify-content:center;align-items:flex-start;margin-top:-50px}.icons{display:inline-flex}.icons a i{margin-left:8px;margin-right:8px;color:#000}.toggle-btn span{width:25px;height:4px;background-color:#000;margin-top:2px;display:block}#sidebar{position:absolute;width:220px;height:100%;background:#fff;left:-250px;transition:.4s}#sidebar ul li{list-style:none;padding-top:20px;padding-bottom:20px}#sidebar.active{left:0}#sidebar.hide{left:-250px}.close{display:flex;justify-content:end}
</style>
<body>
<div id="sidebar">
    <div class="close">
        <i class="material-icons" onclick="show()">
            close
        </i>
    </div>
    <ul>
        <li>Home</li>
        <li>Shop</li>
        <li>Blog</li>
        <li>About us</li>
        <li>Contact Us</li>
    </ul>
</div>
<header>
    <section class="logo">
        <div id="logo"><h3>minera.</h3></div>
    </section>
</header>
<section class="header-bottom">
    <div class="icons">
        <a href=""><i class="material-icons">search </i></a>
        <a href=""><i class="material-icons">person_outline</i></a>
        <a href=""><i class="material-icons">shopping_cart</i></a>
    </div>
    <div class="toggle-btn" onclick="show()">
        <span> </span>
        <span> </span>
        <span> </span>
    </div>
</section>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.3/dist/js/uikit-icons.min.js"></script>
<script src="js/main.js"></script>
</body>
<script>
function show(){
    document.getElementById('sidebar').classList.toggle('active');
}
</script>
</html>

关闭 canvas 菜单 - onclick 功能问题

Off canvas menu - onclick function issue

javascript

css

off-canvas-menu