javascript 展开/折叠菜单列表动画且仅使用 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29039606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expand/collapse a menu list animated and only with CSS
提问by almostamachine
Here's what I'm trying to make:
这是我想要做的：
- Click on "PORTFOLIO";
- Pushes everything down smoothly;
- New links fade-in smoothly;
- Click on "PORTFOLIO" again, do everything in reverse;
- 点击“投资组合”；
- 将一切顺利推下；
- 新链接平滑淡入；
- 再次点击“PORTFOLIO”，反向操作；
My current code;
我当前的代码；
$(function () {
$('[data-toggle]').on('click', function () {
var id = $(this).data("toggle"),
$object = $(id),
className = "open";
if ($object) {
if ($object.hasClass(className)) {
$object.removeClass(className)
} else {
$object.addClass(className)
}
}
});
});#list {
display: none;
}
#list.open {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">A Empresa</a> </li>
<li><a href="#" class="hide" data-toggle="#list">Portfolio</a>
<ul id="list">
<li><a href="#">Comerciais</a> </li>
<li><a href="#">Residenciais</a> </li>
<li><a href="#">Institucionais</a> </li>
<li><a href="#">Edifícios</a> </li>
</ul>
</li>
<li><a href="#">Contato</a> </li>
</ul>
</nav>It's possible to accomplish this without JS, only with CSS? I have no clue whatsoever how to do the animation part, I tried CSS Transitions propriety, but didn't work.
没有 JS 就可以做到这一点，只有使用 CSS 才能做到这一点？我不知道如何做动画部分，我尝试了 CSS Transitions 属性，但没有奏效。
Also, any tips for the markup and JS? I don't thinks I'm doing it the "right way"... any tips would be appreciated.
另外，关于标记和 JS 的任何提示？我不认为我正在以“正确的方式”做这件事……任何提示都将不胜感激。
回答by G-Cyrillus
With only CSSyou may use :focusand eventually pointer-eventsif you want a toggle effect :
仅使用CSS您可以使用:focus，最终pointer-events如果您想要切换效果：
#list {
max-height: 0;
overflow: hidden;
transition: 0.5s linear;
}
a:focus+#list {
max-height: 15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}<nav>
<ul>
<li><a href="#">Home</a> </li>
<li><a href="#">A Empresa</a> </li>
<li><a href="#nowhere">Portfolio</a>
<ul id="list">
<li><a href="#">Comerciais</a> </li>
<li><a href="#">Residenciais</a> </li>
<li><a href="#">Institucionais</a> </li>
<li><a href="#">Edifícios</a> </li>
</ul>
</li>
<li><a href="#">Contato</a> </li>
</ul>
</nav>You can even do this very little CSS without class nor id :
你甚至可以在没有 class 和 id 的情况下做这个很小的 CSS：
ul a +ul {
max-height:0;
overflow:hidden;
transition:0.5s linear;
}
ul a:focus + ul {
max-height:15em;
}
/* only select that link , here using the href attribute */
a[href="nowhere"]:focus {
pointer-events: none;
}<nav>
<ul>
<li><a href="#nowhere">Home</a>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li><a href="#nowhere">A Empresa</a>
<ul>
<li>item</li>
<li>item</li>
</ul>
</li>
<li><a href="#nowhere" >Portfolio</a>
<ul>
<li><a href="#">Comerciais</a> </li>
<li><a href="#">Residenciais</a> </li>
<li><a href="#">Institucionais</a> </li>
<li><a href="#">Edifícios</a> </li>
</ul>
</li>
<li><a href="#">Contato</a>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
</ul>
</nav>回答by melwyn pawar
I have created the menu only using css please check the following fiddle https://jsfiddle.net/dwgpqncw/2/also the code for the same is posted below
我只使用 css 创建了菜单，请检查以下小提琴https://jsfiddle.net/dwgpqncw/2/同样的代码也贴在下面
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>css menu</title>
<style>
*{margin:0; padding:0;}
ul{font-family:Arial, Helvetica, sans-serif;}
ul li ul{height:0px; transition:500ms all;-webkit-transition:500ms all;-moz-transition:500ms all;-o-transition:500ms all;overflow:hidden;}
ul li ul li{ transition:1300ms all;-webkit-transition:1300ms all;-moz-transition:1300ms all;-o-transition:1300ms all;opacity:0}
a{color:#000; text-transform:uppercase;}
ul li ul li a{color:red;}
/*set the height to 0 and on focus set the height to pixels calculation based on the line height*/
ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1),ul li .expandable +ul:nth-child(1){height:0px;overflow:hidden;}
ul li ul li{line-height:30px;font-size:16px;}
ul li .expandable{font-size:20px; line-height:35px; text-decoration:none; padding-left:20px; }
ul li .expandable:hover{text-decoration:underline;}
ul li ul li:before{padding-left:20px; content:"-"; font-size:16px; margin-left:20px}
ul li .expandable:focus{color:red;}
ul li .expandable:focus +ul:nth-child(1){height:90px;}
ul li .expandable:focus +ul:nth-child(2){height:120px;}
ul li .expandable:focus +ul:nth-child(3){height:60px;}
ul li .expandable:focus +ul:nth-child(4){height:120px;}
ul li .expandable:focus +ul:nth-child(1) li,ul li .expandable:focus +ul:nth-child(2) li,ul li .expandable:focus +ul:nth-child(3) li,ul li .expandable:focus +ul:nth-child(4) li{opacity:1;}
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="expandable">Home</a>
<ul>
<li><a href="#">Home link 1</a></li>
<li><a href="#">Home link 2</a></li>
<li><a href="#">Home link 3 </a></li>
</ul>
</li>
<li>
<a href="#" class="expandable">A Empressa</a>
<ul>
<li><a href="#">Empressa link 1</a></li>
<li><a href="#">Empressa link 2</a></li>
<li><a href="#">Empressa link 3 </a></li>
<li><a href="#">Empressa link 4 </a></li>
</ul>
</li>
<li>
<a href="#" class="expandable">Protfolio</a>
<ul>
<li><a href="#">Protfolio link 1</a></li>
<li><a href="#">Protfolio link 2</a></li>
</ul>
</li>
<li>
<a href="#" class="expandable">Contato</a>
<ul>
<li><a href="#">Contato link 1</a></li>
<li><a href="#">Contato link 2</a></li>
<li><a href="#">Contato link 3 </a></li>
<li><a href="#">Contato link 4 </a></li>
</ul>
</li>
</ul>
</body>
</html>
