html – 手风琴垂直导航

概述我已经搜索了答案,但要么问题略有不同,要么我无法让代码在列表中工作,或者它是如此复杂,我只是最终复制和粘贴 – 这显然不是我想要的. 我正在寻找的(我认为这是一个初学者问题),是如何隐藏和揭示“工作”下拉,就像手风琴一样.这是小提琴： http://jsfiddle.net/syoban/9Z8zA/8/ <div><ul class="vertical-nav"> <li class= 我已经搜索了答案,但要么问题略有不同,要么我无法让代码在列表中工作,或者它是如此复杂,我只是最终复制和粘贴 – 这显然不是我想要的.

我正在寻找的(我认为这是一个初学者问题),是如何隐藏和揭示“工作”下拉,就像手风琴一样.这是小提琴：
http://jsfiddle.net/syoban/9Z8zA/8/

<div><ul >    <li ><a href="#"><i1></i1>home</a>    </li>    <li ><a href="#"><i2></i2>about</a>    </li>    <li><a href="#"><i3></i3>work <icd></icd></a>        <ul >            <li>Web</li>            <li>Print</li>            <li>Illustration</li>        </ul>    </li>    <li><a href="#"><i4></i4>contact</a>    </li></ul>

从我收集的内容来看,它与更改下拉ul的高度有关,以便“伪造”隐藏它但超出我的难度.

任何帮助非常感谢.我应该澄清一下,我只喜欢CSS.

解决方法 你可以使用纯CSS实现这一点,不需要jquery(包括悬停效果).只需将这些CSS代码添加到现有代码中即可.这是你的 jsFiddle example.

.vertical-nav li ul {    height: 0px;    overflow: hIDden;    Transition: height 0.3s;    -webkit-Transition: height 0.3s;    -ms-Transition: height 0.3s;}.vertical-nav li:hover ul {    height: 70px;}

总结

以上是内存溢出为你收集整理的html – 手风琴垂直导航全部内容，希望文章能够帮你解决html – 手风琴垂直导航所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。