Javascript 为移动站点Jquery和CSS创建手风琴菜单

我最近开始设计一个移动网站，使用媒体查询和浏览一些网站，看看他们做了什么。手风琴导航菜单似乎是一种方式，可以扩展到普通的水平导航栏。我在网上浏览了又浏览，想找一本手风琴教程，但似乎找不到一本能很好地解释它的

一个很好的例子是他们网站上的一个。以下是我目前的代码：

身体{
填充：0；
保证金：0；
}
#顶部菜单{
高度：50px；
宽度：100%；
背景色：#cde；
显示：块；
}
导航{
宽度：100%；
高度：自动；
显示：块；
保证金：0；
填充：0；
}
导航a{
文字装饰：无；
左侧填充：40px；
}
导航ul{
列表样式：无；
显示：块；
保证金：0；
填充：0；
背景色：#ccc；
} 
李国荣{
显示：块；
宽度：100%；
填充：20px 0px 20px 0px；
边框顶部：2件纯色#abc；
}
导航ul{
身高：0；
溢出：隐藏；
填充顶部：0px；
}
海军ulli a{
左侧填充：100px；
}

看看这个

不幸的是，CSS没有任何点击事件，相反，您需要使用JavaScript和/或jQuery。我使用jQuery

我所做的只是添加一个类

hide nav

到您的nav中，而不显示任何内容。当然还有一个按钮可以点击

还有一点jQuery

$(document).ready(function() {
    $('#topMenu-btn').on('click', function() {
        $('nav').slideToggle();
    });
});

---

不需要Javascript-您可以使用复选框代替。 退房：

如果您仍想使用Javascript，请执行以下操作：

// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
    // prevent Click from redirecting
    e.preventDefault();
    // get the next ul after the li a clicked
    if ($(this).hasClass('visible')) {
        $(this).next('ul').slideUp(200).removeClass("visible");
    } $(this).next('ul').slideDown(200).addClass("visible");
});

---

高度0到自动的CSS动画不起作用。请参阅：

尝试以下方法：

// asuming, that nav-items that should trigger slidedown will have "#" as href
// while actual nav-items will have URLs
$('nav li a[href="#"]').on('click', function (e) {
    // prevent Click from redirecting
    e.preventDefault();
    // get the next ul after the li a clicked
    if ($(this).hasClass('visible')) {
        $(this).next('ul').slideUp(200).removeClass("visible");
    } $(this).next('ul').slideDown(200).addClass("visible");
});

您需要稍微修改一下代码

    <div id="topMenu"></div>
    <nav>
        <ul>
            <li><a href="">Link</a></li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                    <li><a href="">Link 5</a></li>
                    <li><a href="">Link 6</a></li>
                    <li><a href="">Link 7</a></li>
                </ul>
            </li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                    <li><a href="">Link 5</a></li>
                    <li><a href="">Link 6</a></li>
                    <li><a href="">Link 7</a></li>
                </ul>
            </li>
            <li class="has_children"><a href="">Link</a>
                <ul class="sub-menu">
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                </ul>
            </li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
            <li><a href="">Link</a></li>
        </ul>
    </nav>

JS:

---

哎呀，我忘了将小提琴更新为

slideToggle（）

。还是他想从左边开始设置动画？非常感谢你的建议。你帮我做了一个手风琴。我对你感激不尽！记住CSS3对浏览器的支持。如果您在项目中支持旧浏览器，那么最终可能会为相同的浏览器编写JS回退。

var $menu_with_children = $('.has_children > a');

$menu_with_children.on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    if (!$this.parent().find('> .sub-menu').hasClass('visible')) {
        $this.parent().find('> .sub-menu').addClass('visible').slideDown('slow');
    } else{
        $this.parent().find('> .sub-menu').removeClass('visible').slideUp('slow');
    }
});