Question

所以，我有一个包含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>

我正在尝试对它们进行切换效果，因此当用户点击链接时，div会从顶部推送，同时向下移动菜单。一旦打开div并且用户点击另一个链接，它就不应该上升，它应该只显示另一个div的内容。

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

小提琴在这里http://jsfiddle.net/jh2j50df/

Answer 1

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>

<强> JQUERY

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

http://jsfiddle.net/Skaadel/jh2j50df/8/

如果我理解正确的问题，那就是你要找的东西。代码本身并不是那么好，你可能用1而不是4来实现它，但我自己并不擅长JQuery。

希望这有帮助！

请记住在添加JQuery框架时添加它。

Answer 2

试试这个：

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

Jsfiddle：http://jsfiddle.net/jh2j50df/9/

根据导航链接切换div容器

2 个答案: