Jquery div框显示和隐藏问题

下面是我的jquery代码，它通过单击每个链接隐藏和显示每个div框。例如，有3个链接

1） 正常搜索 2） 预先搜索 3） 计划

每个div框有2个链接

因此，首先，它通过Advance和project链接显示第一个div内容

如果我点击Advance链接，它将显示seconddiv框。如果单击Normal链接，它将显示First div框，但如果单击project链接，则我无法转到advance或Normal链接。所有的效果都应该是自上而下的

以下是JSFIDLE：

第一个div和正常搜索内容

预先搜索|
项目
第二个div和advanceserach内容

正常搜索|
项目
第三个div和项目搜索内容

提前搜索|
正常搜索|
$（文档）.ready（函数（）{
//$（#first”）.slideUp（“fast”）；
美元（“#秒”）.slideUp（“快速”）；
美元（“#第三”）.slideUp（“快速”）；
//计划
//预先搜索
$（“#项目”）。单击（函数（）{
$（“#first”）.slideUp（“slow”，function（）{
美元（“#第三”）。向下滑动（“缓慢”）；
});
});
//预先搜索
$（“#高级搜索”）。单击（函数（）{
$（“#first”）.slideUp（“slow”，function（）{
$（“秒”）。向下滑动（“慢”）；
});
});
//正常搜索
$（“#正常搜索”）。单击（函数（）{
$（“#秒，#三”）.slideUp（“慢”，函数（）{
$（“#第一”）。向下滑动（“缓慢”）；
});
});
});

因为

id

必须是唯一的，否则他们将尝试此操作

HTML

<div id="first">
    <p>First div and normal search content</p>
    <b><a class="advanceSearch">Advance Search</a> |
    <a class="project">Project</a></b>
</div>

<div id="second">
    <p>Second div and advance serach content.</p>
    <b><a class="normalSearch">Normal Search</a> |
    <a class="project">Project</a></b>
</div>

<div id="third">
    <p>third div and project search content.</p>
    <b><a class="advanceSearch">Advance Search</a> | 
    <a class="normalSearch">Normal Search</a> |
    </b>
</div>

---

如果不需要使用

slideup（）

，则可以使用

hide（）

或

fadeOut（）

查看元素的ID必须是唯一的-使用类而不是id@ArunPJohny“确切的问题是什么？”阿伦皮尼·奥普斯，我明白。谢谢：）@ArunPJohny我能做出从上到下滑动的效果吗？当我点击每一个按钮时，就像它从顶部向下移动一样。为什么？我可以只做从上到下滑动的效果吗？当我点击每个链接时，它会将整个div从上到下移动，为什么？

<div id="first">
    <p>First div and normal search content</p>
    <b><a class="advanceSearch">Advance Search</a> |
    <a class="project">Project</a></b>
</div>

<div id="second">
    <p>Second div and advance serach content.</p>
    <b><a class="normalSearch">Normal Search</a> |
    <a class="project">Project</a></b>
</div>

<div id="third">
    <p>third div and project search content.</p>
    <b><a class="advanceSearch">Advance Search</a> | 
    <a class="normalSearch">Normal Search</a> |
    </b>
</div>

$(document).ready(function () {

    //$("#first").slideUp("fast");
    $("#second").slideUp("fast");
    $("#third").slideUp("fast");

    //project
    // advance search
    $(".project").click(function () {
        $("#first").slideUp("slow", function () {
            $("#third").slideDown("slow");
        });
    });
    // advance search
    $(".advanceSearch").click(function () {
        $("#first").slideUp("slow", function () {
            $("#second").slideDown("slow");
        });
    });
    //normal search search
    $(".normalSearch").click(function () {
        $("#second, #third").slideUp("slow", function () {
            $("#first").slideDown("slow");
        });
    });

});