domo类型 原码
重点 :
$('ul>li').click(function () {
$(this).toggleClass('active') // 1 点击切换样式
.find('ol') // 2 找到里面的ol标签
.slideToggle(1000, 'linear') // 3 给ol 添加上卷下拉切换
.parent() // 4 找到父亲li
.siblings() // 5 给兄弟li 去除样式
.removeClass('active')
.find('ol') // 6 找到li 里面的ol
.slideUp(1000, 'linear') // 7 上卷
})
* {
margin: 0;
padding: 0;
}
ul,
ol,
li {
list-style: none;
}
ul {
width: 200px;
border: 2px solid #000;
margin: 50px auto;
}
ul>li::before {
content: "★";
}
ul>li.active::before {
content: "☆";
}
ul>li>ol {
padding: 0 0 0 20px;
display: none;
}
ul>li:nth-child(1) {
background-color: pink;
}
ul>li:nth-child(2) {
background-color: skyblue;
}
ul>li:nth-child(3) {
background-color: teal;
}
ul>li:nth-child(4) {
background-color: brown;
}
</style>
</head>
<body>
<ul>
<li>蔬菜
<ol>
<li>韭菜</li>
<li>大白菜</li>
<li>生菜</li>
<li>菠菜</li>
</ol>
</li>
<li>生鲜
<ol>
<li>龙虾</li>
<li>鲍鱼</li>
<li>龙虾</li>
<li>刺身</li>
</ol>
</li>
<li>凉菜
<ol>
<li>凉拌土豆丝</li>
<li>泡黄瓜</li>
<li>藕片</li>
<li>猪肚</li>
</ol>
</li>
<li>主菜
<ol>
<li>小鸡炖蘑菇</li>
<li>可乐鸡翅</li>
<li>水煮肉片</li>
<li>满汉全席</li>
</ol>
</li>
</ul>
<script src="../../../jquery.js"></script>
<script>
$('ul>li').click(function () {
$(this).toggleClass('active') // 1 点击切换样式
.find('ol') // 2 找到里面的ol标签
.slideToggle(1000, 'linear') // 3 给ol 添加上卷下拉切换
.parent() // 4 找到父亲li
.siblings() // 5 给兄弟li 去除样式
.removeClass('active')
.find('ol') // 6 找到li 里面的ol
.slideUp(1000, 'linear') // 7 上卷
})
</script>
</body>
</html>