zoukankan      html  css  js  c++  java
  • jq手风琴效果

     基本思路: 

      手风琴的效果主要取决于html文档的结构,不同的结构用到的jq方法可能是不同的。

    <div id="box">
      
      <div class="navv">标题  

        <div>内容</div>
       </div>
      <div class="navv">标题  

        <div>内容</div>
       </div>
      <div class="navv">标题  

        <div>内容</div>
       </div>
      
      <div class="navv">标题  

        <div>内容</div>
       </div>
    </div>

      我的基本思路是,点击标题栏,让它的子级元素有一个向下显示的动画,然后通过子级再寻找到父级本身,然后再匹配到父级的兄弟的子级让其隐藏。

      效果如图:(样式比较丑,随意看看就好)



    附上代码:(记得要在html中引入jquery文件) 

      html部分:

    <div id="box">
                <div class="navv">box1
                    
                        <div>1111</div>
                        <div>1111</div>
                        <div>1111</div>
                        <div>1111</div>    
                    
                </div>
                
                <div  class="navv">box2
                        <div>5555</div>
                        <div>5555</div>
                        <div>5555</div>
                        <div>5555</div>    
                </div>
                
                <div  class="navv">box3
                        <div>33333</div>
                        <div>33333</div>
                        <div>33333</div>
                        <div>33333</div>    
                </div>
                <div class="navv">box4
                        <div>2222</div>
                        <div>2222</div>
                        <div>2222</div>
                        <div>2222</div>    
                </div>
     </div

    css部分:

    div{
                    border: 1px solid #000;
                    width: 200px;
                }
                .navv{
                    background-color:ghostwhite;
                }
                .navv div{
                    background-color: aquamarine;
                    border-left: none;
                    border-right: none;
                    display: none;
                }
                #box{
                    margin: 0 auto;
                }
                #box1_c,#box2_c,#box3_c,#box4_c{
                    border: none;
                }

    js部分:

    $().ready(function(){
        $(".navv").click(function(){
          $(this).children().slideDown(200).parent().siblings().children().slideUp(200);
        })
     })
  • 相关阅读:
    PWNABLE Silver Bullet
    PWNABLE hacknote
    PWNABLE calc
    vue如何监听浏览器的返回,并进行操作
    字符串的拼接和截取例子
    关于vue在url上向后台动态传递参数
    鼠标移动到超链接上时变为手型
    vue.js 单选框根据v-bind:disabled="条件" 来动态修改多个单选框是否只读
    关于node重装后启动项目报错
    关于在下名字问题的研究报告
  • 原文地址:https://www.cnblogs.com/1234wu/p/10179967.html
Copyright © 2011-2022 走看看