主要构架思路:
1, 隐藏方式: 利用父元素高度使其隐藏和显现
2, 实现过程: 点击某一列菜单, 然后改变其高度, 使下面的内容显示
3, 使用 JS 方法: toggleClass(父元素 ,"类名")
<--! 在初学 JS 时尽量使用改变类名的方法使其状态的改变, 这样是为了做到样式与内容的分离 -->
注意: 使用这个方法需要引进一个 tools.JS, 我的另一篇就是这个 JS 的源码. 希望一起进步, 我也是初学者
html 代码:
- <div id="my_menu" class="sdmenu">
- <div>
- <span class="menuSpan">
- 在线工具
- </span>
- <a href="#">
- 图像优化
- </a>
- <a href="#">
- 收藏夹图标生成器
- </a>
- <a href="#">
- 邮件
- </a>
- <a href="#">
- htaccess 密码
- </a>
- <a href="#">
- 梯度图像
- </a>
- <a href="#">
- 按钮生成器
- </a>
- </div>
- <div class="collapsed">
- <span class="menuSpan">
- 支持我们
- </span>
- <a href="#">
- 推荐我们
- </a>
- <a href="#">
- 链接我们
- </a>
- <a href="#">
- 网络资源
- </a>
- </div>
- <div class="collapsed">
- <span class="menuSpan">
- 合作伙伴
- </span>
- <a href="#">
- JavaScript 工具包
- </a>
- <a href="#">
- CSS 驱动
- </a>
- <a href="#">
- CodingForums
- </a>
- <a href="#">
- CSS 例子
- </a>
- </div>
- <div class="collapsed">
- <span class="menuSpan">
- 测试电流
- </span>
- <a href="#">
- Current or not
- </a>
- <a href="#">
- Current or not
- </a>
- <a href="#">
- Current or not
- </a>
- <a href="#">
- Current or not
- </a>
- </div>
- </div>
CSS 代码:
- @charset "utf-8";
- /* sdmenu */
- div.sdmenu {
- width: 150px;
- margin: 0 auto;
- font-family: Arial, sans-serif;
- font-size: 12px;
- padding-bottom: 10px;
- background: url(bottom.gif) no-repeat right bottom;
- color: #fff;
- }
- div.sdmenu div {
- background: url(title.gif) repeat-x;
- overflow: hidden;
- }
- div.sdmenu div:first-child {
- background: url(toptitle.gif) no-repeat;
- }
- div.sdmenu div.collapsed {
- height: 25px;
- }
- div.sdmenu div span {
- display: block;
- height: 15px;
- line-height: 15px;
- overflow: hidden;
- padding: 5px 25px;
- font-weight: bold;
- color: white;
- background: url(expanded.gif) no-repeat 10px center;
- cursor: pointer;
- border-bottom: 1px solid #ddd;
- }
- div.sdmenu div.collapsed span {
- background-image: url(collapsed.gif);
- }
- div.sdmenu div a {
- padding: 5px 10px;
- background: #eee;
- display: block;
- border-bottom: 1px solid #ddd;
- color: #066;
- }
- div.sdmenu div a.current {
- background: #ccc;
- }
- div.sdmenu div a:hover {
- background: #066 url(linkarrow.gif) no-repeat right center;
- color: #fff;
- text-decoration: none;
- }
JS 代码:
- var menuSpan = document.querySelectorAll('.menuSpan');
- // 获取 HTML 中的显示节点
- for(var i = 0 ; i <= menuSpan.length ; i++){
- menuSpan[i].onclick = function(){
- var parentDiv = this.parentNode;
- // 获取节点的父元素
- toggleClass(parentDiv,"collapsed");
- // 改变父元素的类名实现改变其 CSS 样式
- }
- }};
来源: http://www.jianshu.com/p/cd5b1ea0665c