jQuery slideToggle定位

Question

我正在尝试使用jQuery函数制作一个.slideToggle()切换菜单(参见jsFiddle )。不过，我想使灰色按钮跟随滑动菜单，即移动灰色按钮，以移动顶部的滑动菜单。我能做什么改变？

<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

这是一种有点烦人的方法。我还没想出更好的办法。

它基本上只是重复了幻灯片列表中的菜单标题。它隐藏原来的幻灯片向上，并再次显示在幻灯片下降。

示例

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();
        });
    });
});