Jquery手风琴效果_jquery_HTML_其他

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的jQuery手风琴效果</title> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="xinxi_solution_main"> <div class="xinxi_solution_bg"> <div class="main_mobile"> <ul> <li class="one on"> <div class="left"></div> <div class="left_top"> <i>工业类</i> </div> <div class="right"> <dl> <a title="食品加工行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 食品加工行业解决方案</a> <a title="汽车零部件行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 汽车零部件行业解决方案</a> <a title="家具生产行业解决方案 " target="_blank" href="#" rel='nofollow' onclick='return false;'> 家具生产行业解决方案 </a> <a title="智能生产制造解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 智能生产制造解决方案</a> <a title="食品加工行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 食品加工行业解决方案</a> </dl> </div> </li> <li class="one"> <div class="left"></div> <div class="left_top"> <i>商贸类</i> </div> <div class="right"> <dl style="margin-top: -120px;"> <a title="手机通讯行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 手机通讯行业解决方案</a> <a title="五金配件行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 五金配件行业解决方案</a> <a title="家电卖场行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 家电卖场行业解决方案</a> </dl> </div> </li> <li class="one"> <div class="left"></div> <div class="left_top"> <i>服务类</i> </div> <div class="right"> <dl> <a title="餐饮行业解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 餐饮行业解决方案</a> <a title="会员解决方案" target="_blank" href="#" rel='nofollow' onclick='return false;'> 会员解决方案</a> </dl> </div> </li> <li class="one"> <div class="left"></div> <div class="left_top"> <i>售后服务</i> </div> <div class="right"> <dl> <a title="软件服务支持" target="_blank" href="#" rel='nofollow' onclick='return false;'> 软件服务支持</a> </dl> </div> </li> </ul> </div> </div> </div> </body> <script type="text/javascript"> $(function() { $('.xinxi_solution_main ul li:eq(0)').addClass('on'); $('.xinxi_solution_main ul li:eq(1)').addClass('b2'); $('.xinxi_solution_main ul li:eq(2)').addClass('b3'); $('.xinxi_solution_main ul li:eq(3)').addClass('b4'); $('.xinxi_solution_main ul li:eq(4)').addClass('b5'); $('.xinxi_solution_main ul li:eq(5)').addClass('b6'); $('.xinxi_solution_main ul li:gt(3)').hide(); //当三级分类大于7个的是，成两排显示 $('.xinxi_solution_main ul li').each(function() { var len = $(this).find('.right dl a').length; if (len > 6) { $(this).find('.right dl a').addClass('yichu'); } }); //解决方案效果 $('.xinxi_solution_main ul li').each(function() { var left_h = $(this).find('.left_top').height(); $(this).find('.left_top').css({ 'top': '50%', 'margin-top': -left_h / 2 }); var dl_h = $(this).find('.right dl').height(); $(this).find('.right dl').css({ 'margin-top': -dl_h / 2 }); }); $('.xinxi_solution_main ul li').click(function() { $(this).addClass('on').siblings().removeClass('on'); }); $('.xinxi_solution_main_mobile ul li:first-child').addClass('on'); $('.xinxi_solution_main_mobile ul li').click(function() { $(this).addClass('on').siblings().removeClass('on'); }); $(".solu-category .solu-description").each(function() { var maxwidth = 60; if ($(this).text().length > maxwidth) { $(this).text($(this).text().substring(0, maxwidth)); $(this).html($(this).html() + '...'); } }); }); </script> </html>