jQuery切换幻灯片不会向后滑动

时间:2017-03-11 17:26:09

标签: javascript jquery html css

我正在关注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); 
    });

});

在视频中,当浏览器调整大小时,效果很好,按钮显示,点击它,菜单滑出,再次点击,它会退出。有了我的,这就是我点击时看到的:

Menu expanded

当我再次点击时,没有任何反应。我也无法弄清楚为什么放置后退按钮的列表元素会突出显示。没有在CSS中的哪个地方为它突出显示。

1 个答案:

答案 0 :(得分:0)

我认为你要找的是slideToggle()。如下:

&#13;
&#13;
$(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;
&#13;
&#13;