站长资源网络编程

jQuery实现简单的手风琴效果

整理:jimmy2026/8/1浏览2
简介本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下实现手风琴效果如图所示:html结构:
  • 本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下

    实现手风琴效果如图所示:

    jQuery实现简单的手风琴效果

    html结构:

    <div class="item_box box10">
     <div class="item_box_wp">
      <div class="voice_2">
       <ul>
        <li class="li1" id="li1">
         <div class="fold" style="display:none;">
          <span class="img"></span>
          <span class="txt">插件库</span>
         </div>
         <div class="unfold" style="display:block">
          <dl>
           <dt><img src="/UploadFiles/2021-04-02/img10.png">
    
    

    js代码:

    $(function(){
     //语音通知手风琴效果
     $(".voice_2 ul li").each(function(){
     var fold = $(this).find(".fold");
     var unfold = $(this).find(".unfold");
     if(fold.is(":hidden")){
     $(this).width(680);
     }else{
     $(this).width(100);
     }
     })
     
     $(".voice_2 ul li").click(function(){
     var li_index = $(this).index();
     $(this).animate({width:680},200);
     $(this).find(".unfold").show();
     $(this).find(".fold").hide();
     $(this).siblings().animate({width:100},200);
     $(this).siblings().find(".unfold").hide();
     $(this).siblings().find(".fold").show();
     })
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。