Question

我正在尝试将切换开关连接到班级

.wrapper.open {
transform: translateX(-20%);
}

使用一些jquery。基本上一旦切换

<input id ="toggle-menu" type="checkbox"> <label for="toggle-menu" class="wrapper.open">Menu on</label>

打开动画开始并向左移动整个网站以显示菜单开关。

HTML

<body>
    <div class="overflow-wrapper">
     <div class="wrapper">
     <img id="logo" src="images/white-logo.png" />
     <header>

     <input id ="toggle-menu" type="checkbox">
     <label for="toggle-menu" class="wrapper.open">Menu on</label>



      <div class="nav-page">
        <div class="main-navigation">
         <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Bio</a></li> 
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>

         </ul>

        </div>
       </div>

     </header>

    </div>
   </div>

</body>

CSS

* {
margin: 0 0 0 0;
}

#logo {
width: 70px;
margin-left: 20px;
margin-top: 40px;
position: absolute;
z-index: 1000;

}


header {
background-image: url(images/IMG_4849.JPG);
height: 570px;
background-repeat: no-repeat;
position: relative;
}

li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px 20px;
display: block;
}

a {
cursor: pointer;
}

ul {
list-style: none;
float: left;
margin: 30px -10px;
}

.nav-page {
height: 100%;
width: 100%;
background-color: #222;
transform: translateX(100%);
}

.wrapper {
transform: translateX(0);
transition: transform 0.6s ease;
}


.wrapper.open {
transform: translateX(-20%);
}

.overflow-wrapper {
overflow: hidden;
}

Jquery的

$(function(){


$('.toggle').on('click', function(){
    $('.wrapper').toggleClass('open');

});

});

Answer 1

您正在尝试查找类别为toggle的元素，但HTML中没有此类元素。

您的复选框的ID为toggle-menu，所以：

$(function(){
  $('#toggle-menu').on('click', function(){
    $('.wrapper').toggleClass('open');
  });
});

Working demo

如何将切换链接到一个类？

HTML

CSS

Jquery的

1 个答案: