如何创建一个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个目录），然后这可能会解决问题，我不确定，

对不起不好的解释，任何提示提示代码示例会有所帮助。我记住我不想使用库，我想通过自己创建这个库来学习。

谢谢！

答

在这种情况下，您希望通过遍历click事件处理程序中的DOM来查找相应的内容部分。

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

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

我的错，库函数混淆了，应该是prev（）而不是previous（） – babtek 2010-09-19 17:08:02

如何创建一个php（jquery）幻灯片toogle信息目录

相关推荐