显示/隐藏 div 在单击按钮时打开所有 div 而不是一个

Question

我正在尝试在带有按钮的 div 上使用显示/隐藏，但是当单击按钮时它会立即打开所有 div 这是我在http://starsQA.com/jen-lilley-interviews上尝试的页面

代码如下：

<?php
    include("db_conn.php");
    $qry_string = "select * from questions WHERE starID = 8 && returned = 1 GROUP BY `reason` ORDER BY `edited` DESC, starID ASC, `reason`";
    $prep = $pdo_conn->prepare($qry_string);
    $prep->execute(array($starid));
    while ($row = $prep->fetch(PDO::FETCH_ASSOC)) {
        echo "<button class='show_hide' id='tglbtn{$row['reason']}'>{$row['reason']}</button>";
//        echo "<div style='clear:both;'></div>";
        echo "<div style='color:black;' class='slidingDiv' id='tgldiv{$row['reason']}'><b><u>{$row['reason']}</u></b><br><ol>";
        $qry_stringq = "select * from questions WHERE starID = 8 && returned = 1 && reason = '{$row['reason']}' ORDER BY starID ASC, `reason`";
        $prepq = $pdo_conn->prepare($qry_stringq);
        $prepq->execute(array($starid));
            echo "<ol style='margin:30px'>";
            while ($rowq = $prepq->fetch(PDO::FETCH_ASSOC)) {
                echo "<li><b>{$rowq['question']} - {$rowq['whoAsked']}</b><br>
                        {$rowq['response']}</li><br>";

            }
            echo "<ol'></div>";
        echo "<div style='clear:both;'></div>";
     }
     echo "<br><br>";
    ?>

javascript：

<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();


                    $no = $(this).attr('id').substring(6);

                    if($("#tgldiv" + $no).css("display") == "inline-block") {
                        $("#tgldiv" + $no).css("display", "none");
                        $(this).html($namearray[$no]);
                    }
                    else {
                        $("#tgldiv" + $no).css("display", "inline-block");
                        $namearray[$no] = $(this).html();
                        $(this).html("hide");
                    }
                 });   
});

</script>

css：

            .slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

有人对如何解决此问题有任何想法吗？？？ 已修复

在页面加载/打开时如何阻止 div 打开？ 仍然需要修复

在每个 div 中修复内容也会很有帮助

Answer 1

$('.show_hide').click(function(){
$("this").next('.slidingDiv').slideToggle(); // need target one .slidingDiv  
});

Answer 2

那是因为$(".slidingDiv") 引用了类为slidingDiv 的所有元素。你需要的是上下文。您需要离您的按钮最近的元素。看起来您所有的扩展 div 都是按钮的邻居，因此您可以为此使用 jQuerys siblings 或 next：

$('.show_hide').click(function(){
   $(this).next('.slidingDiv').slideToggle();
});

另外，请不要在您的 id 属性中添加空格，这会破坏您的页面。