如何创建一个php（jquery）幻灯片切换信息目录答案

【问题标题】：How to create a php (jquery) slide toogle information directory如何创建一个php（jquery）幻灯片切换信息目录
【发布时间】：2010-09-20 01:06:52
【问题描述】：

我正在尝试创建一个包含 div 信息的目录，其中一些信息将被隐藏，而一些信息将被显示。当您单击每个目录的单击我按钮时，它会显示隐藏信息，如下面的代码示例所示，

注意：信息和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信息。

我可以手动为每个 div 命名为不同的名称 e.t.c 但对于 jquery 部分来说这将是一个问题。我想我可以编写 10 个不同的点击代码，并一次将每个 div 类命名为 1 到 10（在 1 页上显示 10 个目录），那么这可能会解决问题，我不确定，

抱歉解释不好，任何提示代码示例都会有所帮助。请记住，我不想使用库，我想通过自己创建来学习。

谢谢！

【问题讨论】：

标签： php jquery html css

【解决方案1】：

在这种情况下，您需要通过遍历 click 事件处理程序中的 DOM 来查找适当的内容部分。

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

【讨论】：

我的错，库调用混淆了，应该是 prev() 而不是 previous()