用jquery写出比较小巧的下拉菜单
大家好，已经很久没有给大家发布文章了，因为最近在学习很多新东西，已经保存到自己的印象笔记，所以后续会持续给大家
补更的，因为明天就开学了，今天晚上就用jquery写了一个小小的下拉菜单的demo。
知识点：
jquery的siblings():取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
大白话就是：拿到非当前对象的所有对象
还有一个查找的方法是children：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
大白话就是：拿到当前对象下的某某子元素
demo：案例代码：
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.0.0.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
width: 300px;
list-style: none;
margin: 100px auto;
}
.nav>li{
border: 1px solid #000;
line-height: 35px;
border-bottom: none;
text-indent: 2em;
}
.nav>li:first-child{
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.nav>li:last-child{
border-bottom: 1px solid #000;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.sub{
display: none;
}
.sub>li{
list-style: none;
background: mediumpurple;
}
.sub>li:hover{
background: red;
border-bottom: 1px solid #fff;
}
</style>
<script>
$(function () {
$('.nav>li').click(function () {
//拿到二级菜单
var $sub=$(this).children('.sub');
$sub.slideDown(300);
//拿到非当前的一级菜单的二级菜单
var othersub=$(this).siblings().children(".sub");
//让其他二级菜单收起
othersub.slideUp(300);
})
})
</script>我最近开始玩github了，下半年也会有一个cms免费开源的程序跟大家见面