Question

我想通过在导航中按名称定位内容来滑动其中包含不同内容的div。

我已经有了这个：

$(".div1, .div2, .div3").hide();

$(document).ready(function(){

    $("nav a").click(function () {  
    var divname= this.name;
    $("."+divname).siblings().slideUp(500, function () {
    $("."+divname).slideToggle();
});
});
});

<nav>
<a name="div1">SlideToggle Div 1</a>
<a name="div2">SlideToggle Div 2</a>
<a name="div3">SlideToggle Div 2</a>
</nav>

<div id="container">
<div class="div1">Content Div 1</div>
<div class="div2">Content Div 2</div>
<div class="div3">Content Div 3</div>
</div>

我希望每个div首先滑动，然后使用新div的内容向下滑动，以menue为目标，依此类推。

该脚本出现问题：

有两个div它正在工作。添加第三个确实会使其向下滑动并向上滑动。添加第四个会使其向下滑动，向上滑动并向下滑动等等。兄弟姐妹的想法一定有问题吗？

谢谢。

Answer 1

有一个有效的jsfiddle页面，请查看this。如果这是您想要的，我在您的代码上做了一些工作。 更新代码立即重试此链接。

$(".div1, .div2, .div3").hide();
$(document).ready(function() {
  var firstTime = true;
  $("nav a").click(function() {
    var divname = this.name;
    if (!firstTime) {
        if ($(".slid").hasClass(divname)) {
            firstTime = true;
            $(".slid").removeClass("slid").slideUp();
        } else {

            $(".slid").removeClass('slid').slideUp(500, function() {
                $("." + divname).slideToggle().addClass("slid");

            });
        }
    } else {
        $("." + divname).slideDown().addClass("slid");
        firstTime = false;
    }

  });
});

使用导航SlideToggle内容？

1 个答案: