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

那是因为$(".slidingDiv")引用了slidingDiv类的所有元素。你需要的是背景。您需要最接近按钮的元素。看起来你的所有扩展div都是你按钮的邻居，所以你可以使用jQuerys siblings或next来实现这个目的：

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

此外，请不要在您的ID属性中添加空格，否则会破坏您的网页。

Answer 2

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

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

2 个答案: