jQuery slideToggle定位

Question

我正在尝试使用.slideToggle()函数创建jQuery切换菜单（请参阅jsFiddle）。但是，我想使灰色按钮跟随滑动菜单，即移动灰色按钮以在滑动菜单的顶部移动。我可以做些什么改变？

HTML

<div id="categories">
    <ul>
        <li>Category 1</li>
        <li>Category 2</li>
        <li>Category 3</li>
        <li>Category 4</li>
        <li>Category 5</li>
        <li>Category 6</li>
    </ul>
</div>
<div id="menu">Navigation pane</div>

JS

$(document).ready(function() {
    $('#menu').click(function() {
        $('#categories').slideToggle('fast');
    });
});

CSS

body {
    font-family: Arial;
    font-size: 12px;
}
#menu_service_nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 24px;
    line-height: 24px;
    background-color: #EEE;
    cursor: pointer;
}
#categories {
    position: absolute;
    bottom: 24px;
    height: auto;
    width: 100px;
    display: none;
    border: 1px solid #CCC;
    left: 0;
}
#categories ul {
    list-style: none;
}
#categories ul li {
    margin-left: -30px;
    height: 24px;
    line-height: 24px;
}

Answer 1

这是一种有点黑客的做法。我还没想到还有更好的方法。

它基本上只是复制了上滑列表中的菜单标题。它将原件隐藏在幻灯片上并在向下滑动时再次显示。

Example

HTML

<div id="categories">
    <div class="menu">Navigation pane</div>
    <ul>
        <li>Category 1</li>
        <li>Category 2</li>
        <li>Category 3</li>
        <li>Category 4</li>
        <li>Category 5</li>
        <li>Category 6</li>
    </ul>
</div>
<div id="menu">Navigation pane</div>

脚本

$(document).ready(function() {
    $('#menu').click(function() {
        $('#categories').slideToggle('fast');
        $('#menu').hide();
    });

    $('.menu').click(function() {
        $('#categories').slideToggle('fast', function() {
            $('#menu').show();
        });
    });
});