Question

当我打开导航栏时，我可以点击一个li-tag，它应该带我到相应的面板并打开它（并关闭其他打开的面板）。

我无法工作的是scrollTop功能。

第一次将它带到相应的标题并打开它。 第二次尝试打开面板时，它会使面板的标题过高。

HTML：

<div class="wrapper">
    <div class=test>MENU</div>
    <ul class="nav">
        <li class="1">Diensten</li>
        <li class="2">Vacatures</li>
        <li class="3">Contact</li>
    </ul>
</div>
<div class="filling">
    <p></p>
    <div class="1 item">
        <div class="head">Titel 1</div>
        <div class="body">Hier komt de inhoud</div>
    </div>
    <div class="2 item">
        <div class="head">Titel 2</div>
        <div class="body">Hier komt de inhoud</div>
    </div>
    <div class="3 item">
        <div class="head">Titel 3</div>
        <div class="body">Hier komt de inhoud</div>
    </div>
    <p></p>
</div>

JS：

$(function () {
    $('.nav, .body').hide();
})

$('.test').click(function () {
    $('.nav').slideToggle();
});

$('.nav li').click(function(){
    var e = $(this).attr('class');
    var k = "." +e;
    $('.nav').slideToggle();

    $('html,body').animate({
        scrollTop: $(k).slice(1).offset().top-28},'slow');

    //something wrong here   
    var b = $('.body');
    if (b.is(':visible')) {
        b.slideUp({queue:false});
    }

    $(k).slice(1).children('.body').slideToggle();
});

CSS：

.wrapper {
    position:fixed;
    width:100%;
    top:0;
}
ul {
    width:100%;
    background-color:pink;
}
li {
    cursor:pointer;
    text-align:center;
}
li:hover {
    font-weight:bold;
    background-color:purple;
    color:white;
}
.test {
    width:100%;
    background-color:red;
    text-align:center;
    font-size:20px;
    cursor:pointer;
    color:white;
}
.filling {
    width:100%;
    background-color:yellow;
}
p {
    height:800px;
}
.item {
    width:100%;
    text-align:center;
}
.head {
    color:white;
    background-color:black;
    font-weight:bold;
}
.body {
    height:50px;
    background-color:grey;
}

http://jsfiddle.net/stwq8ytk/4/

尝试点击MENU＆gt;迪恩斯滕（有效）。
现在点击MENU＆gt; Vacatures（不起作用）。

Answer 1

将animate scrollTop放入slideToggle的回调中，如下所示：

$(function () {
    $('.nav, .body').hide();
})

$('.test').click(function () {
    $('.nav').slideToggle();
});

$('.nav li').click(function(){
    var e = $(this).attr('class');
    var k = "." +e;
    $('.nav').slideToggle(function(){
        $('html,body').animate({
        scrollTop: $(k).slice(1).offset().top-28},'slow');
    });



    //something wrong here   
    var b = $('.body');
    if (b.is(':visible')) {
        b.slideUp({queue:false});
    }

    $(k).slice(1).children('.body').slideToggle();

});

Here is the fiddle working

ScrollTop和slideToggle相互搞乱

1 个答案: