堆栈内存溢出
  简体   繁体   English

关闭画布菜单 - onclick 功能问题

[英]Off canvas menu - onclick function issue

 原文  2020-02-28 12:28:28  2   2    javascript/ css/ off-canvas-menu

问题描述

I'm currently messing around with a personal project - quite new to the frontend world.我目前正在处理一个个人项目 - 在前端世界中相当新。

I have an off-canvas slide in menu working, however I cannot open it again after the first time of clicking the toggle button.我在菜单中有一个画布幻灯片，但是在第一次单击切换按钮后我无法再次打开它。

I am using the onclick function and then using CSS to build the transitions in and out of the viewport.我正在使用 onclick 函数，然后使用 CSS 来构建进出视口的过渡。

Not sure where I am going wrong so would appreciate some help!不知道我哪里出错了，所以希望得到一些帮助！

Here is my code:这是我的代码：

<!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 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 JS

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

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

2 个解决方案

解决方案1
 0 已采纳  2020-02-28 12:46:40

You only have to toggle one class to get the desired effect.您只需切换一个类即可获得所需的效果。 Only set one toggle function, this will toggle the class (add the class when it doesn't excist, remove when it does excist)只设置一个切换功能，这将切换类（类不存在时添加，类存在时删除）

Html (only the buttons with the toggle function) Html（仅具有切换功能的按钮）

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

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

Javascript Javascript

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

Css css

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

#sidebar.active{
  left:0;
}

解决方案2
 0  2020-02-28 12:54:03

Call show() on click of X(close button).单击 X（关闭按钮）时调用 show()。 Please note CSS is minified(It is same CSS what is mention in question).请注意 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 离画布响应菜单-打开和关闭问题 - Off canvas responsive menu - open and close issue 滑入菜单-关闭画布 - Slide in menu - off canvas Foundation 6 Off画布菜单 - Foundation 6 Off Canvas Menu 在我的非画布菜单上添加滑动功能 - Add swipe function on my off-canvas menu 关闭画布菜单在Iphone 5上不起作用 - Off canvas menu not working on Iphone 5 关闭画布菜单html css - off canvas menu html css 画布外菜单动画 - Off-canvas menu animation 菜单关闭画布错误移动 - Menu off canvas bug mobile 基础 - 关闭画布滚动问题 - Foundation - Off Canvas Scroll Issue 淡出菜单onClick功能 - FadeOut menu onClick function
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM