锋利的jquery初体验--折叠菜单练习

来源：互联网发布：冒险岛英雄技能数据编辑：程序博客网时间：2024/05/16 10:30

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>导航</title>
<style type="text/css">
#menu{

width: 300px;

}
.chapter{
background: #555;
color: #fff;
cursor: pointer;

}
.highlight{
background: yellow;
color: #000;

}

div{
padding: 0;

}
div a{
background: #583;
color: #fff;
display: none;
float: left;
width: 300px;
}
div span{
font-weight: bold;
font-size: 20px;
}

</style>
</head>
<body>

<div id="menu">

<div class="chapter">
<span>第1章-认识jQuery</span>
<a>1.1-JavaScript和JavaScript库</a>
<a>1.2-加入jQuery</a>
<a>1.3-编写简单jQuery代码</a>
<a>1.4-jQuery对象和DOM对象</a>
<a>1.5-解决jQuery和其它库的冲突</a>
<a>1.6-jQuery开发工具和插件</a>
<a>1.7-小结</a>
</div>

<div class="chapter">
<span>第2章-jQuery选择器</span>
<a>2.1-jQuery选择器是什么</a>
<a>2.2-jQuery选择器的优势</a>
<a>2.3-jQuery选择器</a>
<a>2.4-应用jQuery改写示例</a>
<a>2.5-选择器中的一些注意事项</a>
<a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
<a>2.7-还有其它选择器么？</a>
<a>2.8-小结</a>
</div>

<div class="chapter">
<span>第3章-jQuery中的DOM操作</span>
<a>3.1-DOM操作的分类</a>
<a>3.2-jQuery中的DOM操作</a>
<a>3.3-案例研究——某网站超链接和图片提示效果</a>
<a>3.4-小结</a>
</div>

</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chapter").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
})

});

</script>

</script>
</body>

</html>

自己本来想敲一遍，但是到最后jquery那里还是看了书才明白

所以，还是要多动手啊，不动手都不知道问题在哪里

实际动手，从html开始到一个个div自己做，感觉真的很棒啊！

注意

1.css样式解锁 cursor：point

这个是改变光标的值：从w3s下的代码，有很多样式啊！

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

2.对float有了新的理解，实际动手，发现float很有趣啊

在这里每一个a标签，有了float=left就自成一行

以前看imooc，说float就是可以围绕图片才设计的

以后float的功能再探索吧

3.第一次用jquery要加入<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

而且要写那个开始的函数 $(document).ready(function(){});

这个少了就不行了哦!

0 0