这种效果怎么实现呢
首先把静态页面写好，二级栏目的display设置为none 不显示
然后通过点击实现style属性修改为block
同时加了个小图标效果，给图标的src重新赋值，上面就是实现思路，让我们看看他们
先引用jquery包
下面是html代码
<div class="imgsl1">
<h3>产品分类</h3>
<ul>
<li class="a"><a href="#">SMT贴片加工</a></li>
<div class="text" style="display: none;"><li class="b"><a href="">分类1</a></li>
<li class="b"><a href="">分类1</a></li>
<li class="b"><a href="">分类1</a></li></div>
<li class="a"><a href="#">DIP插件加工</a></li>
<li class="a"><a href="#">后焊加工</a></li>
<li class="a"><a href="#">测试/组装加工</a></li>
<li class="a" ><a href="#">ODM加工</a></li>
<li class="a"><a href="#">OEM加工</a></li>
<div class="text" style="display: none;"><li class="b"><a href="">分类22</a></li>
<li class="b"><a href="">分类121</a></li>
<li class="b"><a href="">分类31</a></li></div>
<li class="a"><a href="">来图来料加工</a></li>
</ul>
</div>
然后是js代码
然后是js代码
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$(".imgsl1 li").toggle(function(){
$(this).css({'background-image':'url(img/sj.png)'});
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
},function(){
$(this).css({'background-image':'url(img/sj1.png)'});
$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
});
});
</script>
这样效果就实现了
当然也可以使用jquery里面的attr进行赋值
这样效果就实现了
当然也可以使用jquery里面的attr进行赋值
辽公网安备:42900402000182号