我正在关注PluralSight的教程。所以我基本上输入了与课程中显示的完全相同的代码。然而我的不起作用。
这是HTML:
<header>
<a href="#" id="toggleMenu"><img src="images/menu.png" /></a>
<div class="row">
<ul>
<li id="menuOut"><img src="images/back.png" /></li>
<li class="selected"><a href="#">Articles</a></li>
<li><a href="#">Company Overview</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
</header>
这是CSS:
#toggleMenu, #menuOut{
display: none;
}
@media only screen and (max-width: 40.063em) {
#toggleMenu{
display: block;
margin: 30px;
}
#menuOut{
display: block;
cursor: pointer;
margin: 30px 0 40px 30px;
header ul{
background: #00abd0;
height: 100%;
position: absolute;
top: -30px;
left: -20px;
}
header ul li{
display: block !important;
clear: both;
background: #00A1c4;
width: 100%;
}
(我只考虑了我认为这个问题的重要部分,而不是所有的CSS!)
这是剧本:
$(document).ready(function() {
$('#toggleMenu').click(function(){
$(".row ul").toggle('slide', {direction: 'left'}, 500);
});
$('#menuOut').click(function(){
$('.row ul').toggle('slide', {direction: 'left'}, 500);
});
});
在视频中,当浏览器调整大小时,效果很好,按钮显示,点击它,菜单滑出,再次点击,它会退出。有了我的,这就是我点击时看到的:
当我再次点击时,没有任何反应。我也无法弄清楚为什么放置后退按钮的列表元素会突出显示。没有在CSS中的哪个地方为它突出显示。
答案 0 :(得分:0)
我认为你要找的是slideToggle()
。如下:
$(document).ready(function() {
$('#toggleMenu').click(function(){
$(".row ul").slideToggle(500);
});
$('#menuOut').click(function(){
$('.row ul').slideToggle(500);
});
});
&#13;
#toggleMenu, #menuOut{
display: none;
}
@media only screen and (max-width: 40.063em) {
#toggleMenu{
display: block;
margin: 30px;
}
#menuOut{
display: block;
cursor: pointer;
margin: 30px 0 40px 30px;
}
header ul{
background: #00abd0;
height: 100%;
position: absolute;
top: -30px;
left: -20px;
}
header ul li{
display: block !important;
clear: both;
background: #00A1c4;
width: 100%;
}
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a href="#" id="toggleMenu"><img src="images/menu.png" /></a>
<div class="row">
<ul>
<li id="menuOut"><img src="images/back.png" /></li>
<li class="selected"><a href="#">Articles</a></li>
<li><a href="#">Company Overview</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Press</a></li>
</ul>
</div>
</header>
&#13;