Question

我在过去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脚本，因为我们都没有尝试过

感谢您的帮助

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

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

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

2 个答案: