Question

我有一个不同点的菜单：

Point 1  
Point 2  
Point 3  
Point 4

并且想要打开子菜单，例如单击点2。看起来应该是这样的：

                 Point 1
 Point 2    |    Sub-Point 1
            |    Sub-Point 2
            |    Sub-Point 3
            |    Sub-Point 4
            |    Sub-Point 5
                 Point 3
                 Point 4

最好的方法是什么？
感谢

Answer 1

基本上你可以创建自己喜欢的菜单，你需要做的就是将导航栏放在屏幕上，然后使用jQuery简单地滑入并使用Animate功能滑出，同时删除并添加一个类确定菜单是否应该滑出或滑入。希望这有帮助

jsFiddle https://jsfiddle.net/t5enfd2v/

Html

<div class="sidemenu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>
<button class="slidetoggle slideout" type="button">slide toggle</button>

CSS

.sidemenu {
    position: absolute;
    height: 100px;
    width: 100px;
    left: -85px;
    top: 50px;
}

的jQuery

$(function () {
    $('.slidetoggle').on('click', function () {
        if ($(this).hasClass('slideout')) {
            $('.sidemenu').animate({
                left: "+=85",
            }, 1000, function () {
                $('.slidetoggle').removeClass('slideout');
                $('.slidetoggle').addClass('slidein');
                //Done
            });
        }
        else if ($(this).hasClass('slidein')) {
            $('.sidemenu').animate({
                left: "-=85",
            }, 1000, function () {
                $('.slidetoggle').removeClass('slidein');
                $('.slidetoggle').addClass('slideout');
                //Done
            });
        }
    });
})

打开右边的子菜单

1 个答案: