Jquery 切换打开和保持打开多个div

我最近4天一直在搜索切换菜单的工作解决方案。到目前为止，我发现在单击另一个div时关闭打开的div。我还检查了Stackoverflow中的许多问题，但没有一个问题是我想要的。 我要做的是单击div（父）和open（子）再次单击parent并关闭child。 我怎样才能为多个父母做到这一点

我的页面结构类似于：

DIV PARENT
   div child
DIV PARENT
   div child
DIV PARENT
   div child

。。。。等等 这是我的jquery实现

这是我的php代码

<?php
    for($i = 0; $i < count($job_id); $i++)
    {
        $bg = ($i % 2) ? "odd" : "even";

        echo '
        <div class="block">
            <div style="border:solid 1px;" id="parent" class="parent ' .$bg. '">
                <div style="float:left; width:50%;"><div class="myMsGothic">' .$title[$i]. '</div></div>
                <div style="float:left; width:15%;">' .$name[$i]. '</div>
                <div style="float:left; width:15%;">' .$area[$i]. '</div>
                <div style="float:left; width:20%; text-align:right;" class="myMsMincho">ID　：　' .strtoupper($_id[$i]). '</div>
                <div class="clearLeft"></div>
            </div>
            <div class="child"><div class="innerContents"><p>' .nl2br($description[$i]). '</p></div></div>
        </div>';
    }
?>

不幸的是，我现在的页面中没有js脚本，因为我尝试过的所有脚本都不起作用

感谢您的帮助

HTML

<div class="parent">
    <div class="child"></div>
</div>

<div class="parent">
    <div class="child"></div>
</div>

如果您不喜欢

toggle（）

，也可以尝试fancier

slideToggle（）

和

fadeToggle（）

您提到您只想在页面加载时显示家长。只需添加以下内容：

CSS

.parent {
    display:none;
}

jQuery

$('.parent').click(function() {
    $(this).find('.child').toggle();
});

$(document).ready(function() { 
    $('.parent').show();
});

---

这是一个简单的解决方案。默认情况下关闭框。单击以打开/关闭多个切换

HTML标记

<div class="toggle">See Stuff</div>
<div class="paragraph">
<p>Content</p>
<p>Video</p>
<p>Image</p>
<ul>
  <li>List</li>
</ul>
<a href="#">Links</a>
</div>

看东西
内容

录像带

形象


名单

jQuery

<script>
$('.paragraph').hide();
$('.toggle').click(function() {
var panel = $(this).next()
$('.paragraph').not(panel).slideUp();
panel.slideToggle({
    direction: "down"
}, 1000);
});
</script>

$（'段落'）.hide（）；
$（'.toggle'）。单击（函数（）{
变量面板=$（this）.next（）
$（'段落'）.not（panel.slideUp（）；
面板。滑动切换({
方向：“向下”
}, 1000);
});

风格

<style>    
.toggle{margin-bottom:25px; margin-top:25px; margin-left:10px; padding:10px; 
font-size:24px; color:#2554C7; cursor: pointer;}
.paragraph{clear:both;margin-top:25px;}
</style>

.切换{页边距底部：25px；页边距顶部：25px；页边距左侧：10px；填充：10px；
字体大小：24px；颜色：#2554C7；光标：指针；}
.段落{清除：两个；页边顶部：25px；}

你能告诉我们你试过什么吗？请包括任何标记和代码。亲爱的Marlo。谢谢你的回答，但没什么变化。child div没有打开，实际上它已经打开了：（通过添加.child{display:none；}首先在css中关闭它们）@yener抱歉，我不知道您希望它默认关闭。按照Jay的建议，它应该会工作。我不敢相信您的代码在JSFIDLE上工作，但相同的代码在我的页面上不工作。另一点是，我只想在页面关闭时向家长显示load@yener在你的文章中包括你所有的HTML和脚本代码，这样我们都能看到回答您最后的请求。