我最近开始使用媒体查询设计一个移动网站，并浏览了一些网站以查看他们做了什么， Accordion 式导航菜单似乎是可行的方法，可以扩展到普通的水平导航栏。我浏览并浏览了 Internet 以寻找 Accordion 演练，但我似乎找不到能够很好地解释它的人。
一个很好的例子是来自 microsoft 的那个在他们的网站上。到目前为止，这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
#topMenu {
height: 50px;
width: 100%;
background-color: #cde;
display: block;
}
nav {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
padding-left: 40px;
}
nav ul {
list-style: none;
display: block;
margin: 0;
padding: 0;
background-color: #ccc;
}
nav ul li {
display: block;
width: 100%;
padding: 20px 0px 20px 0px;
border-top: 2px solid #abc;
}
nav ul ul {
height: 0;
overflow: hidden;
padding-top: 0px;
}
nav ul ul li a {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<nav>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a>
<ul>
<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><a href="">Link</a>
<ul>
<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><a href="">Link</a>
<ul>
<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>
</html>这些导航栏有子菜单 [nav ul ul]，当点击 nav ul li 时会滑出。我希望有人能给我指出正确的方向，告诉我如何在点击时制作一个向下滑动的子菜单，或者帮助我编写代码。
我认为可能有一个基本的，人们可以开始使用和编辑以自定义自己。
感谢您的帮助。
最佳答案
不需要 Javascript - 您可以改用复选框。 查看:http://codepen.io/TimPietrusky/pen/CLIsl
如果你仍然想用 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 动画将无法工作。请参阅:How can I transition height: 0; to height: auto; using CSS?
关于javascript - 为移动站点 Jquery 和 CSS 创建 Accordion 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30933846/