使用jQuery | |的托盤再次單擊時關閉托盤

我有一個帶四個按鈕的導航欄和一個包含4個部分的部分。當點擊一個導航按鈕時，一個「部分」滑出，如果選擇了另一個，則上一個托盤滑入，並且單擊的一個滑出。但我遇到的問題是，當一個已經被選中的按鈕被再次選擇以使該托盤重新滑入時，我知道我的代碼有點混亂，但是幫助肯定會很棒。使用jQuery | |的托盤再次單擊時關閉托盤

$(function hideDrawers() { 
      if($('#contentwrapper section').css('left') != '-800px'){ 
       $('#contentwrapper section').animate({left: "-800px"}, 500); 
       } 
      Active = null; 
      }); 

     $(function() { 
      var $one = $("#content1"); 
      var $two = $("#content2"); 
      var $three = $("#content3"); 
      var $four = $("#content4"); 

     $("#specials").click(function() { 
      $('#contentwrapper section').animate({left: "-800px"}, 500); 
      $one.animate({left: "0px"}); 
      }); 

     $("#lookup").click(function() { 
      $('#contentwrapper section').animate({left: "-800px"}, 500); 
      $two.animate({left: "0px"}); 
      }); 

     $("#recipe").click(function() { 
      $('#contentwrapper section').animate({left: "-800px"}, 500); 
      $three.animate({left: "0px"}); 
      }); 

     });

NAV

<nav> 
       <span id="logo"> 
       <img src="img/logo.png" /> 
       </span> 
       <span class="nav"> 
        <ul> 
         <a href="#" id="specials" ><span class="wedge"></span><li class="special"><span></span><p>Daily Specials</p></li></a> 

         <a href="#" id="lookup"><span class="wedge"></span><li class="lookup"><span></span><p>Product Lookup</p></li></a> 

         <a href="#" id="recipe"><span class="wedge"></span><li class="recipes"><span></span><p>Recipes</p></li></a> 

         <a href="#" id="pharmacy"><span class="wedge"></span><li class="pharmacy"><span></span><p>Pharmacy</p></li></a> 
        </ul> 
       </span> 
      </nav>

章節盤

<section id="contentwrapper"> 
       <!--<img src="img/content-bg.png" />--> 
       <section id="content1" class="contentbg"> 
        <div id="slides"> 
         <div class="slides_container"> 
          <a href="#"><img src="img/slides/image1.jpg" width:"570" height="270"></a> 
         </div> 
         <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
         <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 
        </div> 
       </section> 
       <section id="content2" class="contentbg"> 
       </section> 
       <section id="content3" class="contentbg"> 
       </section> 
       <section id="content4" class="contentbg"> 
       </section> 
      </section>

我知道我有它目前如果選擇按鈕兩次功能點擊腳本將只是重複我試圖尋找這種類型的例子，但我通常會導致幻燈片等。

來源

2012-08-07 shayward

找出來。

$("#specials").click(function() { 
      if($one.css('left') != '0px') { 
      $('#contentwrapper section').animate({left: "-800px"}, 500); 
      $one.animate({left: "0px"}); 
      } 
      else if($one.css('left') != '-800px') { 
       $one.animate({left: "-800px"}); 
      } 
      });

來源

2012-08-07 20:17:39 shayward

使用jQuery | |的托盤再次單擊時關閉托盤

回答

相關問題