JQuery打開/關閉獨特抽屜

我正試圖完成對您來說可能是一件簡單的任務。我需要它，所以每當用戶點擊左側欄上的一個「患者」時，抽屜就會打開。該抽屜將被加載到頁面上的隱藏div（display：none）中。每個div的id將是病人的最後一個姓。顯然，我包括的小提琴顯示所有相同的姓氏僅用於演示目的。JQuery打開/關閉獨特抽屜

但問題是我不知道如何爲每位患者打開一個獨特的抽屜。我想我需要爲每個病人的李以某種方式切換？另外，如果他們點擊列表中的另一位患者，我希望當前打開的抽屜關閉，然後打開他們剛纔單擊的那個抽屜。另外，如果關閉按鈕被點擊，顯然關閉抽屜也是如此。

我有一個抽屜與此有關的工作：

$(".patient").toggle(function(){ 
      $(this) 
       $('#drawer').slideDown("slow") 

      }, function(){ 
       $(this) 
       $('#drawer').slideUp("slow")  

      });

但顯然是行不通的... :(

在撥弄它打開一個標準的「抽屜」。現在可是真的，我想每個命名DIV以相同的形式被加載的數據，請評論，如果你不明白

這裏的小提琴：。

http://jsfiddle.net/3veht/1/

來源

2013-01-23 greycode

你嘗試過什麼？爲什麼你需要每個獨特的div，爲什麼不在用戶點擊名稱時動態加載內容？ –

@JohnKoerner我希望能夠動態加載它！我嘗試了我的小提琴。不知道在哪裏開始做這樣的獨特的項目，這就是爲什麼我問。對不起 – greycode

添加一個數據元素到你的HTML指示標識，讓我們說病人ID在這案例：

<li class="patient green" data-patientId="1">Josh Doe<img src="img/next.png"><img class="imgfix" src="img/accept.png"></li> 
<li class="patient red" data-patientId="2">John Adams<img src="img/next.png"><img class="imgfix" src="img/cancel.png"></li>

然後在你的書呆子當您加載數據時會發生cript，您可以使用該ID來生成頁面請求。我還將撥動開關改爲點擊，並在滑動新撥動開關之前滑動前一撥動開關。在小提琴例如：

$(".patient").click(function(){ 
    var pat = $(this); 
    if ($("#drawer").is(":visible")) 
     $("#drawer").slideUp("fast", function() { 

      $('#drawer').slideDown("slow") 
      $("#drawer").load("/echo/js?js=" + pat.data("patientid"));  
     }); 
    else 
    { 
     $('#drawer').slideDown("slow") 
     $("#drawer").load("/echo/js?js=" + pat.data("patientid")); 
    } 
});

更新小提琴：http://jsfiddle.net/3veht/6/

來源

2013-01-23 03:57:45

@JohnKoemer這太棒了！生成頁面請求對我來說可能有點困難。這就是爲什麼我想使用預加載的隱藏div。你可以添加生成一個頁面請求？數據全部由php驅動 – greycode

@JohnKoemer也是，它似乎並沒有在小提琴中正常工作。點擊第一個，然後是第二個，然後是第一個。我希望抽屜關閉，然後打開剛纔單擊的人，而不是重新打開抽屜。你介意修理嗎？ – greycode

@greycode對於PHP，只需使用返回html的URL替換/ echo/js即可。所以你可以簡單地做'$（「＃drawer」）。load（「details.php？id- =」$（this）.data（「patientid」））;' –

檢查這個小提琴更新....在代碼所做

變化

var divud = $(this).text().split(' ')[1]; 
       $('#drawer').slideDown("slow"); 
       $('#'+divud).removeClass('hidden'); 
       $('#'+divud).slideDown("slow");

JSFIDDLE

來源

2013-01-23 03:55:19

JQuery打開/關閉獨特抽屜

回答

相關問題