1

我正在尝试使用.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;
}
4

1 回答 1

1

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

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

例子

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();
        });
    });
});
于 2013-09-03T04:49:10.003 回答