jq手风琴导航下拉切换

jq手风琴导航下拉切换

效果展示

html

<ul>
<li>
<h2>lalala<s></s></h2>
<div class="list">
<div class="boder_b clearfix">
<a href="mom/medicine_momlist.html"><img src="mom001.jpg" />
<p>阿三阿四</p>
</a>
<a href="mom/medicine_momlist.html"><img src="mom002.jpg" />
<p>阿三阿四</p>
</a>
</div>
</div>
</li>
<li>
<h2>阿三阿四 <s></s></h2>
<div class="list">
<div class="boder_b clearfix">
<a href="mom/medicine_momlist.html"><img src="mom004.jpg" />
<p>阿三阿四</p>
</a>
<a href="mom/medicine_momlist.html"><img src="mom003.jpg" />
<p>阿三阿四</p>
</a>
<a href="mom/medicine_momlist.html"><img src="mom005.jpg" />
<p>阿三阿四</p>
</a>
</div>
<div class="boder_b clearfix">
<a href="mom/medicine_momlist.html"><img src="mom007.jpg" />
<p>阿三阿四</p>
</a>
<a href="mom/medicine_momlist.html"><img src="mom008.jpg" />
<p>阿三阿四</p>
</a>
</div>
</div>
</li>
<li>
<h2>哇去去<s></s></h2>
</li>
<li>
<h2>呵呵哒<s></s></h2>
</li>
<li>
<h2>咳咳<s></s></h2>
</li>
</ul>

css

li>h2 s {
/*大小、距离、浮动*/
float: right;
width: 0.7rem;
height: 0.725rem;
margin-top: 0.5875rem;
margin-right: 0.5rem;
/*图片、旋转角度、旋转时间*/
background: url(../img/zc_navbg33.png) right center no-repeat;
-webkit-background-size: 100% auto;
background-size: 100% auto;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

li>h2.active1 s {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}

jquery

$(function() {
//药品隐藏展示
$("ul h2").click(function() {
$(this).toggleClass("active1").next(".list").slideToggle();
});
});