返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery实现点击弹出子栏目显示影藏效果

2016-07-27 文章标签: jquery 特效 浏览次数:
根据客户项目实现默认出现一级栏目,点击一级栏目字栏目出现

这种效果怎么实现呢

首先把静态页面写好,二级栏目的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代码

<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进行赋值

关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。