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); 
    }); 

}); 

：

そして、ここではスクリプトです

ビデオでは、ブラウザのサイズが変更されたときに効果があり、ボタンが表示され、クリックし、メニューがスライドして再びクリックされ、戻ってきます。鉱山では、これは私がクリックしたときに、私が見たものである。

Menu expanded

そして私はもう一度クリックすると、何も起こりません。私はまた、なぜ、戻るボタンが置かれているリスト要素が強調表示されているのか理解できません。 CSSのどこにハイライトされているかは書かれていません。

Answer 1

あなたが探しているものはslideToggle()だと思います。次のように： `トグル（）`その方法を使用しているため、古いぇなければなりません

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

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

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