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

Question

我正在学习有关 PluralSight 的教程。所以我基本上完全按照类(class)中出现的方式输入了所有代码。但是我的不起作用。

这是 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 中的任何地方为突出显示它而编写。

Answer 1

我认为您正在寻找的是 slideToggle()。如下:

$(document).ready(function() {
		$('#toggleMenu').click(function(){
       		$(".row ul").slideToggle(500);
    	});

	    $('#menuOut').click(function(){
	       $('.row ul').slideToggle(500); 
	    });
	});

    #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%;
    }
}

<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>