Как мне заставить работать класс jogery?добавив класс "open" в мое гамбургер-меню. - PullRequest
Новая
       20

Как мне заставить работать класс jogery?добавив класс "open" в мое гамбургер-меню.

0 голосов
/ 05 октября 2018

Цель состоит в том, чтобы создать гамбургермену, которое при «щелчке» раскладывается, добавляя класс .open, одновременно нажимая на существующий div вниз, чтобы было возможно увидеть содержимое этого div, даже когда менюоткрыт.

У меня проблемы с тем, чтобы заставить jquery работать вообще, и я не уверен, где я допустил ошибку.

Если вы это сделаете, пожалуйста, просветите меня, это было бы очень полезно!Я пробовал несколько раз с разными уроками.

$(document).ready(function(){

    $(".menuicon").on("click", function(){
        $(".menuoverview").toggleClass (".open");

    });

});
body {
  margin: 0;
  padding: 0;
}

.header {
width: 100%;
height: auto;
border: 1px solid black;
display: flex;
flex-direction: row;

}

.header .menuicon {
display: flex;
height: 40px;
width: 40px;
margin-bottom: 0;
padding-bottom: 0;
cursor: pointer;

}

.header .menuicon img {
  padding: 2%;

}

.header .logo {
  display: flex;
  margin-left: 30%;


}

.header .logo img {
width: 130px;
height:auto;
padding: 1%;
margin-left: %;

}

/* This is the default class when the menu icon is not yet clicked. The // should of course be removed */

.menuoverview {
//height: 0;
overflow: hidden;
}

/*This is the class that should be applied when clicking on the menu icon */
.menuoverview .open {
height: auto;
overflow: visible;

}

.menuoverview {
border-left: 1px solid black;
border-right: 1px solid black;
display: flex;
}

.menuoverview .menuitem{
display: flex;
flex-direction: column;
padding: 5%;

}



.videobox {
  height: 300px;
  border: 1px solid black;
}

@media only screen and (max-width: 600px) {

.menuoverview {
 flex-direction: column;
}

.menuoverview .menuitem {
 align-self: center;
 padding: 1%;
}

}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=“resources/css/lasttry.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/lasttry.js"></script>
  </head>

  </head>
  <body>

<div class="header">
  <div id="icon" class="headericon">
  </div>
  <div id="logo" class="headericon">
    <img src="resources/logo_3dinspo.png" alt="">
  </div>
</div>


<div class="menuoverview">
  <div class="menuitem">
    <h4 class=menuheader>header1</h4>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <div class="menuitem">
    <h4 class=menuheader>header2</h4>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <div class="menuitem">
    <h4 class=menuheader>header3</h4>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>


  </body>
</html>

JP

1 Ответ

0 голосов
/ 05 октября 2018

Вы пытались удалить точку в toggleClass? 

.toggleClass("open");

Не думаю, что вам нужно указывать, что это класс в этом методе, так как он уже ищет имя класса.

Пример быстрого кода: https://codepen.io/mkempinsky/pen/XxKNoe

...