幻灯片菜单不滑动

Question

我的代码包含HTML，CSS和js文件。虽然我可以用CSS学习JS，所以我陷入了困境。输出中的绿色窗口似乎是幻灯片，但没有发生。

我也使用<script src="js/modernizr.custom.js"></script>指JS的页面，但它不会发生这样即使我已经尝试了所有这些reloated东西，但我无法从HTML参考，即使它不工作下TAG相同的HTML页面

$("#toggle").click(function() { 
 
    $(".menu").toggleClass("closed"); 
 
    $(this).toggleClass("closed"); 
 
    $(".content").toggleClass("closed"); 
 
    $("#wrapper").toggleClass("closed") 
 
});

* { font-family:courier; box-sizing:border-box; } 
 

 
html, body { margin:0; padding:0; height:100%; min-height:100%; background-color:floralwhite } 
 

 
.menu { width:250px; height:100%; position:fixed; background-color:seagreen; transition:all 1s; left:0; z-index:50; overflow-y:auto; padding-bottom:100px; } 
 

 
.menu.closed { left:-250px; } 
 

 
#toggle { background-color:seagreen; height:100%; min-height:100%; width:50px; position:fixed; top:0; bottom:0; left:0px; z-index:25; &:hover { cursor:pointer; } &.closed { left:0px; top:0; bottom:0; right:0; width:100%; height:100%; opacity:.3; } transition:all .7s ease; } 
 

 

 

 
.menu ul { list-style-type:none; padding:0; margin:85px 0 0 40px; padding-right:40px; } 
 
.menu ul li { color:floralwhite; font-size:20px; margin:0 0 5px 0; display:block; height:40px; line-height:40px; &:hover { background-color:lighten(seagreen, 10%); cursor:pointer; } padding-left:10px; transition:all .3s; }

<div id="toggle"> 
 
</div> 
 

 
<div class="menu closed"> 
 
    <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Logo</a></li> 
 
     <li>Stuff</li> 
 
     <li>Cooking</li> 
 
     <li>Games</li> 
 
    </ul> 
 
</div>

Answer 1

你的CSS包含SCSS元素，如

#toggle { 
    ... 
    #toggle:hover { 
    cursor: pointer; 
    } 
    ... 
} 

纯CSS中没有嵌套。将这些嵌套规则转换为普通CSS（并将jQuery添加到片段中）以使其工作。

通常，请确保您的标记，样式和JavaScript代码没有语法错误。那里有很多工具。

$("#toggle").click(function() { 
 
    $(".menu").toggleClass("closed"); 
 
    $(this).toggleClass("closed"); 
 
    $(".content").toggleClass("closed"); 
 
    $("#wrapper").toggleClass("closed") 
 
});

* { 
 
    font-family: courier; 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background-color: floralwhite 
 
} 
 

 
.menu { 
 
    width: 250px; 
 
    height: 100%; 
 
    position: fixed; 
 
    background-color: seagreen; 
 
    transition: all 1s; 
 
    left: 0; 
 
    z-index: 50; 
 
    overflow-y: auto; 
 
    padding-bottom: 100px; 
 
} 
 

 
.menu.closed { 
 
    left: -250px; 
 
} 
 

 
#toggle { 
 
    background-color: seagreen; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    width: 50px; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    z-index: 25; 
 
    transition: all .7s ease; 
 
} 
 

 
#toggle:hover { 
 
    cursor: pointer; 
 
} 
 

 
#toggle.closed { 
 
    left: 0px; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: .3; 
 
} 
 

 
.menu ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 85px 0 0 40px; 
 
    padding-right: 40px; 
 
} 
 
.menu ul li { 
 
    color: floralwhite; 
 
    font-size: 20px; 
 
    margin: 0 0 5px 0; 
 
    display: block; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    padding-left: 10px; 
 
    transition: all .3s; 
 
} 
 
.menu ul li:hover { 
 
    background-color: lighten(seagreen, 10%); 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toggle"> 
 
</div> 
 

 
<div class="menu closed"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Logo</a></li> 
 
    <li>Stuff</li> 
 
    <li>Cooking</li> 
 
    <li>Games</li> 
 
    </ul> 
 
</div>

Answer 2

$("#toggle").click(function() { 
 
    $(".menu").toggleClass("closed"); 
 
    $(this).toggleClass("closed"); 
 
    $(".content").toggleClass("closed"); 
 
    $("#wrapper").toggleClass("closed") 
 
});

* { 
 
    font-family: courier; 
 
    box-sizing: border-box; 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    background-color: floralwhite 
 
} 
 

 
.menu { 
 
    width: 250px; 
 
    height: 100%; 
 
    position: fixed; 
 
    background-color: seagreen; 
 
    transition: all 1s; 
 
    left: 0; 
 
    z-index: 50; 
 
    overflow-y: auto; 
 
    padding-bottom: 100px; 
 
} 
 

 
.menu.closed { 
 
    left: -250px; 
 
} 
 

 
#wrapper { margin-left: 50px;} 
 

 
#wrapper.closed{ left: 250px; margin-left: 0px; transition: all .3s; position: relative;} 
 
#toggle { 
 
    background-color: seagreen; 
 
    height: 100%; 
 
    min-height: 100%; 
 
    width: 50px; 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0px; 
 
    z-index: 25; 
 
    transition: all .7s ease; 
 
} 
 

 
#toggle:hover { 
 
    cursor: pointer; 
 
} 
 

 
#toggle.closed { 
 
    left: 0px; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: .3; 
 
} 
 

 
.menu ul { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 85px 0 0 40px; 
 
    padding-right: 40px; 
 
} 
 
.menu ul li { 
 
    color: floralwhite; 
 
    font-size: 20px; 
 
    margin: 0 0 5px 0; 
 
    display: block; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    padding-left: 10px; 
 
    transition: all .3s; 
 
} 
 
.menu ul li:hover { 
 
    background-color: lighten(seagreen, 10%); 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toggle"> menu 
 
</div> 
 

 
<div class="menu closed"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Logo</a></li> 
 
    <li>Stuff</li> 
 
    <li>Cooking</li> 
 
    <li>Games</li> 
 
    </ul> 
 
</div> 
 

 
<div id="wrapper"> dwdlkqnbwkjdbjqkbwkbqkh </div>