今天继续复习jQuery的知识，做一个菜单树。
先贴一下html的代码
html的设计并不能，关键是jQuery的实战比较难，现在粘贴一下js代码
先贴一下html的代码
点击(此处)折叠或打开
-
<div id="box">
-
<ul>
-
<li class="m"><p>首 页</p></li>
-
<li class="m"><p>组织机构</p>
-
<ul>
-
<li class="m"><p>公司简介</p>
-
<ul>
-
<li class="m"><p>公司理念</p></li>
-
<li class="m"><p>企业文化</p></li>
-
</ul>
-
</li>
-
<li class="m"><p>部门职能</p></li>
-
<li class="m"><p>联系我们</p></li>
-
</ul>
-
</li>
-
<li class="m"><p>新闻动态</p>
-
<ul>
-
<li class="m"><p>公司动态</p></li>
-
<li class="m"><p>行业新闻</p></li>
-
<li class="m"><p>通知公告</p></li>
-
</ul>
-
</li>
-
<li class="m"><p>产品中心</p>
-
<ul>
-
<li class="m"><p>产品列表</p></li>
-
<li class="m"><p>产品分类</p></li>
-
<li class="m"><p>成功案例</p></li>
-
</ul>
-
</li>
-
</ul>
- </div>
点击(此处)折叠或打开
-
<style>
-
*{margin:0;padding:0;}
-
html,body{width:100%;height:100%;font-family:'微软雅黑'}
-
ul{list-style:none;}
-
h3{margin:20px;padding:5px;width:300px;background:#ccc;text-align:center;border:1px #444 solid;letter-spacing:4px;}
-
#box{margin:19px;width:300px;}
-
-
#box{margin:19px;width:300px;padding:0 10px;}
-
#box ul{padding-left:20px;margin-top:5px;}
-
#box li.m{background:url(img/m.gif) no-repeat 2px 8px;cursor:pointer;text-indent:17px;padding:5px 0;}
-
#box li.p{background:url(img/p.gif) no-repeat 2px 8px;}
-
</style>
-
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
-
<script>
-
$(function(){
-
$("li:has(ul)").addClass("p");
-
$("ul:eq(0)>li ul").hide(); //这是查看ul序号为0下的li 下的ul.
-
$("p").click(function(){
-
$(this).parent(":has(ul)").find(">ul").toggle().end().toggleClass("p");
-
});
-
});
- </script>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29876573/viewspace-1818025/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
从用户管理系统中复习javaweb知识7
下一篇：
从用户管理系统中复习javaweb知识9
请登录后发表评论
登录
全部评论
