首先就是大家经常写jq用到的引入js
<script src="./js/jquery-3.6.1.js"></script>
下面写css内容,添加样式
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 100px;
text-align: center;
}
.box li {
line-height: 40px;
}
.box>li {
background-color: salmon;
}
.box ol li {
background-color: pink;
}
.box ol {
display: none;
}
然后是html代码:
<ul class="box">
<li>商品1
<ol>
<li>商品1内容</li>
<li>商品1模板</li>
<li>商品1价格</li>
</ol>
</li>
<li>商品2
<ol>
<li>商品2内容</li>
<li>商品2模板</li>
<li>商品2价格</li>
</ol>
</li>
<li>商品3
<ol>
<li>商品3内容</li>
<li>商品3模板</li>
<li>商品3价格</li>
</ol>
</li>
<li>商品4
<ol>
<li>商品4内容</li>
<li>商品4模板</li>
<li>商品4价格</li>
</ol>
</li>
</ul>
后面写那个如何用jQuery写手风琴效果:
$(function() {
$('.box>li').click(function(){
$(this).children('ol').stop().slideDown('slow').
parent().siblings().children('ol').stop().slideUp('slow');
})
})
接下来就是实现了