如何創建一個php（jquery）幻燈片toogle信息目錄

我想創建一個目錄，其中包含信息在一個div中，這些信息中的一些將被隱藏，並且它將被顯示。當您點擊每個目錄的點擊我按鈕時，它會顯示隱藏信息，如下面的代碼示例所示，如何創建一個php（jquery）幻燈片toogle信息目錄

注意：信息和div將由來自數據庫的php生成！

的Html

<html> 
     <head> 
      <link href="style.css" type="text/css" rel="stylesheet" /> 
      <script type = "text/javascript" src ="jquery.js"></script> 
      <script type = "text/javascript"> 
       $(document).ready(function() { 
        $(".toogle").click(function() { 
         $(".hiddenInfo").slideToggle("slow"); 
        }); 
       }); 
      </script> 
     </head> 

     <body> 
      <div class="roundtest"> 
       <p> 
        Hello World 
        <div class="hiddenInfo"> 
         <p> Omg this is soooo hidden its amazing!</p> 
         <p> Omg this was also hidden, im so proud!</p> 
        </div> 
        <div class="toogle"> Click Me </div> 
       </p> 
      </div> 
      <br /> 
      <div class="roundtest"> 
       <p> 
        Hello World 
        <div class="hiddenInfo"> 
         <p> Omg this is soooo hidden its amazing!</p> 
         <p> Omg this was also hidden, im so proud!</p> 
        </div> 
        <div class="toogle"> Click Me </div> 
       </p> 
      </div> 
    </body> 
</html>

CSS

body { 
     background-color:white; 
} 
.roundtest { 
     font: 11px "Verdana", Arial, Helvetica, sans-serif; 
     width: 400px; 
     height: auto; 
     border: 1px solid green; 
     background-color: white; 
     color: #333; 
     -moz-border-radius: 5px; 
     -webkid-border-radius: 5px; 

     -moz-box-shadow:2px 2px 0 #c2c2c2; 
     -webkit-box-shadow:2px 2px 0 #c2c2c2; 
     box-shadow:2px 2px 0 #c2c2c2; 
} 
.hiddenInfo { 
     display: none; 
}

現在的問題是，我將使用PHP來輸出的信息和div的，我的，如上圖所示的問題是，如果每個div有同名，我點擊一個目錄中的顯示信息，它顯示了所有的div信息。

我可以用不同的名字e.t.c手動命名每個div，但這對於jquery部分會是一個問題。我想我可以編碼10個不同的點擊代碼，並命名每個div類從1到10（每頁顯示10個目錄），然後這可能會解決問題，我不確定，

對不起不好的解釋，任何提示提示代碼示例會有所幫助。我記住我不想使用庫，我想通過自己創建這個庫來學習。

謝謝！

來源

2010-09-19 Gebsbo

在這種情況下，您希望通過遍歷click事件處理程序中的DOM來查找相應的內容部分。

$('.toogle').click(function() { 
    // get the sibling node with class 'hiddenInfo' 
    var mysection = $(this).prev('.hiddenInfo'); 
    mysection.slideToggle('slow'); 
});

來源

2010-09-19 16:28:43 babtek

這似乎沒有工作.. – Gebsbo 2010-09-19 16:35:41

我的錯，庫函數混淆了，應該是prev（）而不是previous（） – babtek 2010-09-19 17:08:02

如何創建一個php（jquery）幻燈片toogle信息目錄

回答

相關問題