幻灯片菜单不滑动
问题描述:
我的代码包含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包含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>
答
$("#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>
您提供的CSS是无效的。请使用[W3C验证程序]进行验证(https://jigsaw.w3.org/css-validator/#validate_by_input)。 – jfeferman
您忘记了在代码片段中添加jQuery:它已损坏。 – Terry