jQuery的 - 的slideToggle來選擇和取消按鈕

我這裏有一個的jsfiddle - http://jsfiddle.net/eYV4n/jQuery的 - 的slideToggle來選擇和取消按鈕

真正簡單的導航和它下面隱藏的div塊。

當您單擊導航欄中的第二個鏈接時，div塊會通過slideToggle向下滑動。

當div塊滑落時，我想點擊按鈕被選中。

我可以通過改變背景顏色來點擊它。

當div塊再次滑動時，是否可以取消選擇鏈接（將其顏色改回）。

jquery.hover（）處理程序懸停和懸停。是否有可能用slideToggle做同樣的事情。

<!DOCTYPE html> 
    <html> 
     <meta charset="UTF-8"> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="robots" content=""> 
     <title>Title of the document</title> 

     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

     <style type="text/css"> 
     *{ 
      margin:0; 
      padding:0; 
     } 
     body{ 
      background:#eee; 
     } 
     #wrap{ 
      background:#fff; 
      max-width:800px; 
      margin:0 auto; 
      height:1000px; 
     } 
     ul{ 
      list-style:none; 
      overflow:auto; 
     } 
     ul li{ 
      display:inline; 
     } 
     ul li a { 
      float:left; 
      display:block; 
      color:#222; 
      padding:10px; 
      margin:0 5px 0 0; 
     } 
     #block{ 
      width:100%; 
      margin:0 auto; 
      height:200px; 
      background:red; 
      display:none; 
     } 
     </style> 

     </head> 

    <body> 
     <div id="wrap"> 
     <nav> 
      <ul> 
      <li><a href="">One</a></li> 
      <li><a href="" id="btn">Two &darr;</a></li> 
      <li><a href="">Three</a></li> 
      <li><a href="">Four</a></li> 
      </ul> 
     </nav> 

     <div id="block"> 

     </div> 

     </div><!-- #wrap --> 


     <script> 

     $('#btn').click(function(e){ 
      e.preventDefault(); 
      $('#block').slideToggle('2000') 
      $('#btn').css('background','red'); 
     }) 


     </script> 
    </body> 

    </html>

來源

2013-07-01 ttmt

一個更好的解決方案是切換一個類，然後改變背景。你應該使它成爲最好的做法，永遠不要用Javascript來設計元素，你應該使用CSS。添加/刪除類很好。這將使得代碼更容易長期維護，而且由於您使用的是類而不是內聯樣式，因此它更具語義。在你的CSS

$('#btn').click(function(e){ 
     e.preventDefault(); 
     $('#block').slideToggle('2000') 
     $('#btn').toggleClass('active'); 
    })

然後：

試試這個。

.active { background: red; }

編輯：Jsfiddle here。

來源

2013-07-01 14:58:17 qwerty

jQuery的 - 的slideToggle來選擇和取消按鈕

回答

相關問題