堆棧內存溢出
  簡體   English   中英

關閉畫布菜單 - onclick 功能問題

[英]Off canvas menu - onclick function issue

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

問題描述

我目前正在處理一個個人項目 - 在前端世界中相當新。

我在菜單中有一個畫布幻燈片，但是在第一次單擊切換按鈕后我無法再次打開它。

我正在使用 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');
}

2 個解決方案

解決方案1
 0 已采納  2020-02-28 12:46:40

您只需切換一個類即可獲得所需的效果。 只設置一個切換功能，這將切換類（類不存在時添加，類存在時刪除）

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;
}

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

單擊 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 離畫布響應菜單-打開和關閉問題 滑入菜單-關閉畫布 Foundation 6 Off畫布菜單 在我的非畫布菜單上添加滑動功能 關閉畫布菜單在Iphone 5上不起作用 關閉畫布菜單html css 畫布外菜單動畫 菜單關閉畫布錯誤移動 基礎 - 關閉畫布滾動問題 淡出菜單onClick功能
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM