我的代碼包含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>
您提供的CSS是無效的。請使用[W3C驗證程序]進行驗證(https://jigsaw.w3.org/css-validator/#validate_by_input)。 – jfeferman
您忘記了在代碼片段中添加jQuery:它已損壞。 – Terry