jQuery切換幻燈片不會向后滑動

Question

我正在關注有關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中寫出要突出顯示的內容。

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>