當單擊按鈕時，顯示/隱藏div將打開所有div，而不僅僅是一個

Question

我正在嘗試在具有按鈕的div上使用show / hide，但是單擊按鈕時它會一次打開所有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

這是因為$(".slidingDiv")引用所有帶有slidingDiv類的slidingDiv 。 您需要的是上下文。 您需要最接近按鈕的元素。 看起來您所有擴展的div都是按鈕的鄰居，因此您可以為此使用jQuery 兄弟姐妹或next 兄弟姐妹 ：

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

另外，請不要在您的id屬性中添加空格，否則會破壞您的頁面。

Answer 2

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