切换打开并保持打开多个 div答案

【问题标题】：toggle open and stay open multiple div切换打开并保持打开多个 div
【发布时间】：2014-06-30 02:41:44
【问题描述】：

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

我的页面结构类似于：

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

....等等这是我的jQuery实现 http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

这是我的 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 脚本，因为我尝试过它们都没有工作

感谢您的帮助

【问题讨论】：

你能告诉我们你尝试了什么吗？请包含任何标记和代码。

标签： jquery toggle

【解决方案1】：

HTML

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

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

jQuery

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

如果你不喜欢toggle()，你也可以试试更高级的slideToggle()和fadeToggle()。

您提到您只想在页面加载时显示父母。只需添加这些：

CSS

.parent {
    display:none;
}

jQuery

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

http://jsfiddle.net/my5C9/1/

【讨论】：

亲爱的马洛。感谢您的回答，但没有任何改变。子 div 没有打开实际上它已经打开了:(
通过添加 .child { display: none;} 首先在您的 css 中关闭它们
@yener 抱歉，我不知道您希望它默认关闭。按照杰的建议，它应该工作。
我不敢相信您的代码在 jsfiddle 上运行，但相同的代码在我的页面上运行不正常。另一点是我只想在页面加载时显示父母
@yener 在您的帖子中包含您所有的 HTML 和脚本代码，以便我们都能看到。我编辑了我的答案以解决您的最后一个请求。

【解决方案2】：

这是简单的解决方案。盒子默认关闭。单击以打开/关闭多个切换。

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>

风格化

<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>

【讨论】：