Javascript 基于导航链接切换div容器

因此，我有一个包含3项的简单导航：

<nav>
    <ul>
        <li><a href="#">Open first</a></li>
        <li><a href="#">Open second</a></li>
        <li><a href="#">Open third</a></li>
        <li><a href="#">This one doesnt open anything</a></li>

    </ul>
</nav>

在上面，我有3个div，每个菜单链接一个

<div id="content-1" style="background:red">Lorem</div>
<div id="content-2" style="background:blue">Lorem</div>
<div id="content-3" style="background:yellow">Lorem</div>

Lorem
洛勒姆
洛勒姆

我试图在它们上获得切换效果，所以当用户单击链接时，div会从顶部被按下，同时向下移动菜单。 一旦这个div被打开，用户点击了另一个链接，它就不应该出现，它应该只显示另一个div的内容

我是一个jQuery新手，无论我尝试了什么，我都无法让它工作

小提琴在这里

试试这个：

<div id="content-1" style="background:red">Lorem</div>
<div id="content-2" style="background:blue">Lorem</div>
<div id="content-3" style="background:yellow">Lorem</div>

<script>
   $(document).ready(function(){
   $('#content-1, #content-2, #content-3').hide();
   $('a').on('click',function(){
       var container = $(this).data('container');
       if ($(container).css('display') == 'none') {
          $('#content-1, #content-2, #content-3').hide();
       }
       $(container).toggle();
     })
   })
</script>

Lorem
洛勒姆
洛勒姆
$（文档）.ready（函数（）{
$（'#content-1，#content-2，#content-3'）.hide（）；
$（'a'）。在（'click'，function（）上{
var container=$（this.data（'container'）；
if（$（container.css（'display'）=='none'）{
$（'#content-1，#content-2，#content-3'）.hide（）；
}
$（container.toggle（）；
})
})

jsiddle:

HTML

<div id="content-1" style="background:red">Lorem</div>
<div id="content-2" style="background:blue">Lorem</div>
<div id="content-3" style="background:yellow">Lorem</div>

<nav>
    <ul>
        <li><a id="content-1link" href="#">Open first</a></li>
        <li><a id="content-2link" href="#">Open second</a></li>
        <li><a id="content-3link" href="#">Open third</a></li>
        <li><a id="content-4link" href="#">This one doesnt open anything</a></li>
    </ul>
</nav>

如果我没弄错的话，你要找的就是这样的东西。代码本身不是很好，你可以用1个函数而不是4个函数，但是我自己并不擅长JQuery

希望这有帮助

---

记得在添加JQuery框架时添加它。

你的小提琴没有“尝试”任何东西，请显示你有什么JQuery尝试，就像这样？这个很棒！但是，如果单击链接打开div，是否也可以关闭div？

$(document).ready(function () {
    $("#content-1link").click(function () {
        if ($("#content-1").height() == 20) {
            $("#content-1").animate({
                height: "200px"
            });
        } else {
            $("#content-1").animate({
               height: "20px"
            });
        }
    });
});