关于jquery控制多个DIV显示隐藏的问题

Question

我的代码是这样的，现在要实现的就是如何利用这一个脚本控制多个DIV的显示隐藏。哪位大侠指点下。
javasript部分：
<script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".head1").toggle(function () {
                $(this).removeClass("head1").addClass("head2");
                $(".body").slideDown("5000");
            }, function () {
                $(this).removeClass("head2").addClass("head1");
                $(".body").slideUp("5000");
            });
        });
    </script>CSS部分：
.head1
{
    background: url(DIV_2.jpg) no-repeat center 0px;
    text-align: left;
    font-size: 12px;
    height: 19px;
    width: 459px;
    cursor: pointer;
    color: #5d5d5d;
    vertical-align: middle;
    padding-top: 3px;
}
.head2
{
    background: url(DIV_1.jpg) no-repeat center 0px;
    text-align: left;
    font-size: 12px;
    height: 19px;
    width: 459px;
    cursor: pointer;
    color: #ffffff;
    vertical-align: middle;
    padding-top: 3px;
}HTML部分：
<div>
        <table width="459px" border="0" style="text-align:center;" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <div class="head1">
                        联系人
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="body" style="display: none; border-bottom: #5d5d5d 1px solid; text-align: center; border-left: #5d5d5d 1px solid; width: 455px; color: #464646; vertical-align: top; border-top: #5d5d5d 1px solid; border-right: #5d5d5d 1px solid;"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="head1">
                        路线
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="body" style="display: none; border-bottom: #5d5d5d 1px solid; text-align: center; border-left: #5d5d5d 1px solid; width: 455px; color: #464646; vertical-align: top; border-top: #5d5d5d 1px solid; border-right: #5d5d5d 1px solid;"></div>
                </td>
            </tr>
        </table>
    </div>

Answer 1

点击$(".head1"),该元素移除"head1"类添加"head2"类并展开$(".body")，再点击此元素，该元素移除"head2"类添加"head1"类，并收起$(".body")，是这样吗？

Answer 2

多个DIV的显示隐藏$(function(){
$("#div1").show();
$("#div2").hide();});

Answer 3

对，我现在的问题是如果有多个DIV的话，点击任何一个class="head1"的DIV，所有class="body"的DIV都显示或者隐藏了，我先要的效果是点击第一个class="head1"的DIV的时候，只是与他对应的DIV也就是他下面的DIV显示隐藏，点击第2个class="head1"的DIV的时候，只是与他对应的DIV也就是他下面的DIV显示隐藏。

Answer 4

首先把$(".body")元素的类提取出来，然后移除table结果，得到dom如下：
<div>
    <div class="head1">联系人</div>
    <div class="body">text here</div>
    <div class="head1">路线</div>
    <div class="body">text here</div>
</div>
然后使用如下方法:
$(".head1").click(function () {
    $(this).next('.body').toggle('slow');
});

Answer 5

可能是外部css的作用，移除外部css，简化style如下：
<style type="text/css">
    .head1 {
    }
    .body {
        display:none;
        border:1px solid gray;
    }
</style>

Answer 6

自己解决了，不过也要谢谢Jusfr

Answer 7

我也要用，能不能把代码给我看看[email protected]

Answer 8

没怎么看明白，能不能发我看看 [email protected]  谢谢