2012-03-31 32 views
1

我一直想弄清楚如何能夠使滑動面板正常工作。面板的滑動部分工作完美無缺,我的問題是:JQuery滑動面板 - 點擊時按鈕不會自動隱藏,面板在加載時打開。

  • 面板在加載時展開。
  • 假設要關閉/打開的按鈕(兩個不同的按鈕)在點擊後不是自我隱藏的。

所以基本上我想實現的是:

  1. 打開網頁。
  2. 點擊「打開」按鈕 - >「打開」按鈕消失
  3. 按鈕「關閉」出現
  4. 面板往下滑。

什麼我有是:

  1. 打開網頁 - >面板已經延長。
  2. 點擊「打開」按鈕。
  3. 沒有任何反應。

    關閉按鈕不顯示,面板未觸摸。這裏是我的編碼:

HTML代碼:

  <div id="toggle" style="list-style: none;"> 
       <input id="open" class="open" href="#" type="button" value="Open" /> 
       <input id="close" style="display: none;" class="close" href="#" type="button" value="Close" />    
      </div> 

JQuery的:

$(document).ready(function() { 

     $("#open").click(function(){ 
      $("div#panel").slideDown("slow"); 
     }); 

     $("#close").click(function(){ 
      $("div#panel").slideUp("slow"); 
     });  

     $("#toggle a").click(function() { 
      $("#toggle a").toggle(); 
     });  

    }); 

我希望任何形式的幫助。謝謝。

回答

2

首先,在你的HTML代碼,您沒有添加#panel,而你沒有添加任何CSS
我不知道你想在你的#panel什麼做的,但我做了這樣的事情:
Here
我希望這會有所幫助。

+0

正是!好的。 :) – Miro 2012-03-31 21:02:43

+0

這是HTML代碼的一部分,而不是整個事情。是的,我有一個CSS,但我只是認爲它在這裏沒有用。 另外,感謝您的貢獻。我會看看它。 – 2012-03-31 22:33:20