Вне меню холста - проблема функции onclick - PullRequest
Новая
       1

Вне меню холста - проблема функции onclick

0 голосов
/ 28 февраля 2020

В настоящее время я возлюсь с личным проектом - совершенно новым для внешнего мира.

У меня работает слайд вне холста в меню, однако я не могу открыть его снова после первого нажатия кнопки переключения.

Я использую функцию 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 ]

0 голосов
/ 28 февраля 2020

Вызовите шоу () по нажатию кнопки X (кнопка закрытия). Обратите внимание: 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>
0 голосов
/ 28 февраля 2020

Вам нужно переключить только один класс, чтобы получить желаемый эффект. Установите только одну функцию переключения, это будет переключать класс (добавить класс, когда он не существует, удалить, если он не существует)

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...