精华内容
下载资源
问答
  • v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。 – 实现效果如图 需求描述: 第一个显示蓝色按钮,代表数据...
  • jQuery文本段落展开和折叠效果 html,body,div,h2,p{margin: 0;padding: 0;} html{font: 1em Arial, Helvetica, sans-serif;color: #444;} a{color: #0087f1;} p{margin-bottom: 5px;} .container{margin: 0 ...
    <!DOCTYPE html>
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery文本段落展开和折叠效果</title>
    <style>
    html,body,div,h2,p{margin: 0;padding: 0;}
    html{font: 1em Arial, Helvetica, sans-serif;color: #444;}
    a{color: #0087f1;}
    p{margin-bottom: 5px;}
    .container{margin: 0 auto;width: 600px;}
    .wrap{position: relative;padding: 10px;overflow: hidden;}
    .gradient{width: 100%;height: 35px;background: url() repeat-x;position: absolute;bottom: 0;left: 0;}
    .read-more{padding: 5px;background: #fff;color: #333;position: relative;}
    .read-more a{padding-right: 22px;background: url() no-repeat 100% 50%;font-weight: bold;text-decoration: none;position: absolute;}
    .read-more a: hover{color: #000;}


    .triangle-down-hovertree {
        width: 0.675rem;
        height: 0.375rem;
        background: url(bot.png) center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0px;
        left: 0px;
        margin: 0px auto;
        top: 0.6rem;
    }
    .triangle-up-hovertree {
        width: 0.675rem;
        height: 0.375rem;
        background: url(top.png) center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: 0px;
        left: 0px;
        margin: 0px auto;
        top: 0.6rem;
    }
    .hewenqiToggle {
        height: 5rem;
        position: absolute;
        bottom: 0px;
        width: 100%;
        background: url(op_bg.png);
        background-size: 100% 100%;
    }




    </style>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var slideHeight = 75; // px
        var defHeight = $('.wrap').height();
        if(defHeight >= slideHeight){
            $('.wrap').css('height' , slideHeight + 'px');
            $('.read-more').append('<a href="#">点击查看更多。。</a>');
            $('.read-more a').click(function(){
            var curHeight = $('.wrap').height();
            if(curHeight == slideHeight){
                $('.wrap').animate({
                height: defHeight
                }, "normal");
                $('.read-more a').html('点击隐藏');
                $('.gradient').fadeOut();
                $('.read-more span').addClass("triangle-down-hovertree");
                $('.read-more span').removeClass("triangle-up-hovertree");
                $('.hewenqiToggle').css("height","1.2rem");
            }else{
                $('.wrap').animate({
                height: slideHeight
                }, "normal");
                $('.read-more a').html('点击查看更多。。');
                $('.gradient').fadeIn();
                $('.read-more span').removeClass("triangle-down-hovertree");
                $('.read-more span').addClass("triangle-up-hovertree");
                $('.hewenqiToggle').css("height","5rem");
            }
            return false;
            });  
        }
    });
    </script>
    </head>
    <body>
        <div class="container">
            <div class="wrap">
                <div>
                    我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试
                </div>
              <div class="gradient"></div>
            </div>
            <div class="read-more">
                <div class="hewenqiToggle"></div>
                <span class="triangle-down-hovertree"></span>
            </div>
        </div>
    </body>
    </html>
    展开全文
  • 之前在网上找了很多文章,要么没有循环,要么格式不是我想要的。最后看到了一篇大佬的文章https://blog.csdn.net/haishangfeie/article/details/81040211。大佬的是树结构,和循环列表很相似,只不过查看二级数据的...

    之前在网上找了很多文章,要么没有循环,要么格式不是我想要的。最后看到了一篇大佬的文章https://blog.csdn.net/haishangfeie/article/details/81040211。大佬的是树结构,和循环列表很相似,只不过查看二级数据的时候会覆盖首级数据,对于想要直观的查看每一级的数据可能不太方便,所以动手吧,就有了下面这种可以无限循环的列表。 

    直接放代码吧,代码记得放在components里面

    wxml

    <view>
      <scroll-view style="background:white" class="con">
        <view bindtap='tapItem' data-id='{{ model.id }}' data-text='{{ model.name }}' data-nodes="{{model.nodes}}" class="text">{{ model.name }}</view>
        <view wx:if='{{ isBranch }}' bindtap='toggle' class="img">
          <image src=" {{ open ? '../../images/down.png' : '../../images/right1.png' }}"></image>
        </view>
        <view wx:else class="imgnone"> </view>
      </scroll-view>
        <view wx:if='{{ isBranch }}' hidden='{{ !open }}'>
        <mytree wx:for='{{ model.nodes }}' wx:key='id' model='{{ item }}'></mytree>
      </view>
     </view>

    js

    Component({
      properties: {
        model: Object,
      },
    
      data: {
        open: false,
        isBranch: false,
      },
    
      methods: {
        toggle: function (e) {
          if (this.data.isBranch) {
            this.setData({
              open: !this.data.open,
            })
          }
        },
    
        tapItem: function (e) {
          var itemid = e.currentTarget.dataset.id;
          var text = e.currentTarget.dataset.text;
          var nodes = e.currentTarget.dataset.nodes
          this.triggerEvent('tapitem', { id: itemid, text: text,nodes:nodes},{ bubbles: true, composed: true }); 
          //console.log('arr', this.properties.model)
        },
        
      },
    
      ready: function (e) {
        //console.log(this.data);
        this.setData({
          isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length),
        });
       
      },
    })

    wxss

    /* pages/tree/tree.wxss */
    .con image{
      width: 25px;
      height: 25px;
      margin-top: 12px;
    }
    .con{
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid rgb(228, 227, 227);
    }
    .text{
      float: left;
      margin-left: 3%;
      width: 60%;
    }
    .img{
      text-align: right;
    }
    .imgnone{
      width: 100%;
      height: 100%;
      background-color: rgb(241, 246, 247);
    }

    json

    {
      "component": true,
      "usingComponents": {
        "mytree": "../tree/tree"
      }
    }

     用的时候,treeData就是你要放进去的数据。点击文字的时候调用tapItem方法,可以查看点击的数据内容,可以用来赋值或者查询数据。点击向右的图标,展开当前层级下面的子级。当前层级无子级时,向右图标隐藏。

    <view wx:for="{{treeData}}" wx:key="index" class="model">
      <mytree model='{{item}}' bind:tapitem='tapItem' style="display:{{hid}}">
      </mytree>
    </view>
    tapItem: function (e) {
        var str = e.detail
        console.log(e)
      },

    treeData的数据结构是这样的。到此为止,你就可以无限的循环展开列表啦。如果你的数据结构和我的不太一样,记得去wxml和js里面更改一下属性名称。

     

     

     

     

    展开全文
  • 点击展开再次点击关闭 ;">一级目录</span></a> <li><a href="#">二级</a></li> <li><a href="#">二级</a></li> <li><a href="#">二级</a></li> ;">一级目录</span></a> <li><a href="#">二级...

    注意事项

    二级目录一定要在一级目录包裹着

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <title>点击展开再次点击关闭</title>
    </head>
    
    <body>
        <div class="_Fu">
            <a href="javasrcipt:;"><span>一级目录</span></a>
            <ul class="_Zi">
                <li><a href="#">二级</a></li>
                <li><a href="#">二级</a></li>
                <li><a href="#">二级</a></li>
            </ul>
        </div>
        <div class="_Fu">
            <a href="javasrcipt:;"><span>一级目录</span></a>
            <ul class="_Zi">
                <li><a href="#">二级</a></li>
                <li><a href="#">二级</a></li>
                <li><a href="#">二级</a></li>
            </ul>
        </div>
        <div class="_Fu">
            <a href="javasrcipt:;"><span>一级目录</span></a>
            <ul class="_Zi">
                <li><a href="#">二级</a></li>
                <li><a href="#">二级</a></li>
                <li><a href="#">二级</a></li>
            </ul>
        </div>
    </body>
    
    <script>
        // 调用方法
        k73('._Fu', '._Zi')
        // 第一个值是父元素第二个值是子元素
        function k73(idParent, idSon) {
            let parent = $(idParent);
            let son = $(idSon);
            son.hide();
            parent.first().find(son).show();//让第一个初始的时候展开
            parent.on('click', function (event) {
                if ($(this).find(son).is(':hidden')) {
                    parent.find(son).hide(300);// 关闭其他
                    $(this).find(son).show(300);// 显示自己
                } else {
                    $(this).find(son).hide(300);// 关闭自己
                }
                event.preventDefault();
            });
        }
    </script>
    </html>

    如果你不喜欢在其他js页面写在调用的话把js部分替换成这样

    需要更换成其他事件的话讲click换成对应事件即可

        
            var parent = $('._Fu');
            var son = $('._Zi');
            son.hide();
            parent.first().find(son).show();//让第一个初始的时候展开
            parent.on('click', function (event) {
                if ($(this).find(son).is(':hidden')) {
                    parent.find(son).hide(300);// 关闭其他
                    $(this).find(son).show(300);// 显示自己
                } else {
                    $(this).find(son).hide(300);// 关闭自己
                }
                event.preventDefault();
            });

     

    展开全文
  • 1、循环列表,点击展开,再次点击关闭 html部分 <view class="listMain"> <view class="list" wx:for="{{list}}" wx:key="index"> <view class="title">{{item.title}}</view> <view...

    循环列表展开关闭效果 - 案例下载地址
    1、循环列表,点击展开,再次点击关闭
    在这里插入图片描述
    html部分

    <view class="listMain">
      <view class="list" wx:for="{{list}}" wx:key="index">
        <view class="title">{{item.title}}</view>
        <view class="desc {{item.isShow ? 'show' : 'hide'}}">{{item.desc}}</view>
        <text class="listBtn" bindtap="listBtn" wx:if="{{!item.isShow}}" data-index="{{index}}">展开</txt>
        <text class="listBtn" bindtap="listBtn" wx:if="{{item.isShow}}" data-index="{{index}}">关闭</text>
      </view>
    </view>
    

    css部分

    .listMain {
      padding: 30rpx;
    }
    .listMain .list{
      border-bottom: 1rpx solid #ddd;
      padding: 20rpx 10rpx;
      position: relative;
    }
    .listMain .list .title{
      font-size: 30rpx;
      color: #333;
      width: 80%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 10rpx;
    }
    .listMain .list .desc{
      font-size: 24rpx;
      color: #666;
    }
    .listMain .list .listBtn{
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      color: #999;
      font-size: 26rpx;
    }
    .show{ display: block;}
    .hide{ display: none;}
    

    data部分

    list: [
          {
            title: '前端技术汇总',
            isShow: false,
            desc: 'html、div+css+js、选择器、居中、闭包、继承、网站重构、优化、迭代、盒模型、BFC、数组、深浅拷贝、本地存储、清除浮动、状态码等等'
          }, {
            title: '前端技术框架',
            isShow: false,
            desc: 'vue、angular、react、bootstrap、backbone、jquery、lay ui、amaze ui、zepot、ionic、flutter、require、echart等等'
          }, {
            title: '前端技术延伸',
            isShow: false,
            desc: '什么是前端,简单讲就是在程序开发中,跟美工设计人员打交道比较多的部分。或者讲是展现给多数用户的操作界面部分,操作界面可以是实体的(比如遥控器、按键面片等),也可以是虚拟的(比如显示器里的各种窗口)。大多数情况下,我们使用的是虚拟界面,也就是利用计算机图形功能,在显示器中画出来供我们操作的部分。虚拟界面的好处就是输入设备简单(通常一个鼠标加一块键盘就行了),还有就是灵活容易变通,如果客户对界面不太满意,改动起来相对容易点。因为是虚拟的图形,所以理论上是可以任意进行延伸的,比如二维的图形不能满足要求了,还可以三维的设计。'
          }, {
            title: '后端技术',
            isShow: false,
            desc: '很多人在开发过程中不太关注数据库,对于表结构的设计也没什么讲究大多属于“能用就行”,但是根据作者将近十年的开发经验来看的话,只要你是从事 Web 相关领域开发你就无法避免不和数据库打交道,在Web开发中大多功能操作本质上都是对数据库进行操作,不管你用是 Pythod,Java,Ruby 等语言进行 Web 开发,你其实都是在面向数据库进行编程'
          }, {
            title: 'UI设计师',
            isShow: false,
            desc: 'UI,即用户界面(User Interface)是系统和用户之间进行交互和信息交换的媒介。简而言之,UI设计师就是设计用户界面。一般我们手机上app的界面都是UI设计师需要设计的。通俗易懂点说,UI就是做界面的,最重要的部分是app界面,看到手机里各种app没?大部分展现在你面前的东西,都是UI设计师需要做的。'
          }
        ]
    

    js点击事件

    listBtn (e) {
        var that = this
        let index = e.currentTarget.dataset.index
        let currect = "list["+index+"].isShow"
        if (that.data.list[index].isShow === true) {
          console.log("隐藏")
          that.setData({
            [currect]: false
          })
        } else{
          console.log("显示")
          that.setData({
            [currect]: true
          })
        }
      }
    

    有一些情况下后台不传给你标示(isShow)这就需要自己js手动添加

    下面的map以及forEach都可以手动添加isShow字段

    onLoad: function () {
        var that = this
        let dataList = that.data.list
        // dataList.forEach(function(item, index){
        //   dataList[index].isShow = false
        // })
        dataList.map((item, index)=>{
          dataList[index].isShow = false
        })
        that.setData({
          list: dataList
        })
      },
    

    2、循环列表,点击展开,其余的关闭
    data数据以及html和css代码同上面一样

    listBtn (e) {
        let that = this
        let index = e.currentTarget.dataset.index
        let dataList = that.data.list
        dataList[index].isShow = !dataList[index].isShow
        if (dataList[index].isShow){
          that.packUp(dataList,index);
        }
        that.setData({
          list: dataList
        })
      },
      packUp(data,index){
        for (let i = 0, len = data.length; i < len; i++) {
          if(index!=i){
            data[i].isShow = false
          }
        }
      },
    

    多层展开关闭列表

    <view class='list_box' wx:for='{{list}}' wx:key='this' wx:for-item='parentItem' wx:for-index='parentIndex' >
        <view class='list'>
            <view class='list_name_box' catchtap='listTap' data-parentindex='{{parentIndex}}'>
                <text class='list_item_name'>{{parentItem.listName}}</text>
                <text class='icon_down' wx-if='{{parentItem.show&&"icon_down_rotate"}}'>关闭</text>
                <text class='icon_down' wx:else >展开</text>
            </view>
            <view class='list_item_box' wx:if='{{parentItem.show}}'>
                <view class='list_item' wx:for='{{parentItem.item}}' wx:key='this' catchtap='listItemTap' data-index='{{index}}'  data-parentindex='{{parentIndex}}'>
                    <view class='list_item_name_box'>
                        <text class='list_item_name'>{{item.itemName}}</text>
                        <text class='icon_down' wx:if='{{item.show&&"icon_down_rotate"}}'>关闭</text>
                        <text class='icon_down' wx:else >展开</text>
                    </view>
                    <view class='other_box' wx:if='{{item.show}}'>
                        <view class='other'>
                            <text class='other_title'>内容:</text>
                            <text class='other_text'>{{item.content}}</text>
                        </view>
                        <view class='other'>
                            <text class='other_title'>时间:</text>
                            <text class='other_text'>{{item.time}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    
    page{
      background: #f3f7f7;
    }
    .list_name_box{
      background: #fff;
      border-bottom: 1px solid #efefef;
      display: flex;
      height: 90rpx;
      align-items: center;
      padding: 0 25rpx;
      font-size: 32rpx;
    }
    .list_item_name{
      flex: 1;
    }
    .list_item_name_box{
      background: #fff;
      font-size: 30rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      padding: 0 25rpx 0 50rpx;
    }
    .other{
      display: flex;
      height: 80rpx;
      padding: 0 25rpx 0 50rpx;
      align-items: center;
      font-size: 30rpx;
      color: #666;
    }
    .icon_down_rotate{
      transform:rotate(180deg);
    }
    
    list:[
          {listName:'列表1',
           item:[{
             itemName:'子列表1-1',
             content:'1-1中的内容',
             time: '2015-05-06'
           }, {
               itemName: '子列表1-2',
               content: '1-2中的内容',
               time: '2015-04-13'
           }, {
               itemName: '子列表1-3',
               content: '1-3中的内容',
               time: '2015-12-06'
           }]
          }, 
          {
            listName: '列表2',
            item: [{
              itemName: '子列表2-1',
              content: '2-1中的内容',
              time: '2017-05-06'
            }, {
              itemName: '子列表2-2',
              content: '2-2中的内容',
              time: '2015-08-06'
            }, {
              itemName: '子列表2-3',
              content: '2-3中的内容',
              time: '2015-11-06'
            }]
          }, {
            listName: '列表3',
            item: [{
              itemName: '子列表3-1',
              content: '3-1中的内容',
              time: '2015-05-15'
            }, {
              itemName: '子列表3-2',
              content: '3-2中的内容',
              time: '2015-05-24'
            }, {
              itemName: '子列表1-3',
              content: '3-3中的内容',
              time: '2015-05-30'
            }]
          }
        ]
    

    //点击最外层列表展开收起

    listTap(e){
        console.log('触发了最外层');
        let Index = e.currentTarget.dataset.parentindex,//获取点击的下标值
            list=this.data.list;
        list[Index].show = !list[Index].show || false;//变换其打开、关闭的状态
        if (list[Index].show){//如果点击后是展开状态,则让其他已经展开的列表变为收起状态
          this.packUp(list,Index);
        }
    
        this.setData({
          list
        });
      },
      //点击里面的子列表展开收起
      listItemTap(e){
        let parentindex = e.currentTarget.dataset.parentindex,//点击的内层所在的最外层列表下标
            Index=e.currentTarget.dataset.index,//点击的内层下标
            list=this.data.list;
        console.log(list[parentindex].item,Index);
        list[parentindex].item[Index].show = !list[parentindex].item[Index].show||false;//变换其打开、关闭的状态
        if (list[parentindex].item[Index].show){//如果是操作的打开状态,那么就让同级的其他列表变为关闭状态,保持始终只有一个打开
          for (let i = 0, len = list[parentindex].item.length;i<len;i++ ){
            if(i!=Index){
              list[parentindex].item[i].show=false;
            }
    
          }
        }
        this.setData({list});
      },
      //让所有的展开项,都变为收起
      packUp(data,index){
        for (let i = 0, len = data.length; i < len; i++) {//其他最外层列表变为关闭状态
          if(index!=i){
            data[i].show = false;
            for (let j=0;j<data[i].item.length;j++){//其他所有内层也为关闭状态
                data[i].item[j].show=false;
            }
          }
        }
      },
    
    展开全文
  • Vue for循环列表控制显示隐藏

    千次阅读 2019-07-12 18:38:55
    点击每一列,可以展开效果 实现原理: 方法一: <ul id="app"> <li v-for='item in items' @click="toggle(item)"> <span v-if='item.show'>{{item.content}}</span> </li> </...
  • 循环列表在页面中无法获取到dom,所以封装组件,获取dom。 1.父组件代码 <template> <div class="container"> <div class="list" v-for="(item, index) in dataList" :key="index"> <...
  • list:[ { id:0, // 消息是否隐藏 txtHidden: true, // 消息是否已读 unRead:false, // 消息展开隐藏后提示的内容 state:'详情', // 消息的title title:"中奖消息", // 消息的内容 desc:"此处是中奖消息的假数据...
  • 小程序循环实现单个显示隐藏(秒会)

    千次阅读 2019-09-02 15:31:01
    小程序循环实现单个显示隐藏 获取小程序循环里面的值,实现单个隐藏显示,废话不多说,直接上代码 .wxml <view bindtap="clase" wx:for="{{content}}" wx:key="{{content}}" data-id="{{item.id}}"><!--把...
  • 实现这种效果需要用到 details 和 summary 标签 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8".../head&a
  • uni-app 实现点击列表隐藏显示

    千次阅读 2021-04-22 16:56:34
    <!-- 卖家订单 --> <view class="conent" v-for="(item,index) in list" :key='index'> <view class="conent-bott"> ...view class="bott-b">...view class="revokes" @click="rejectS(item.id,...
  • 微信小程序,循环下拉列表,点击时只展开其中一个 这是效果 1.wxml <!-- bigwarp --> <view class="dewarp"> <view class='...
  • JS实现鼠标点击展开/隐藏表格行

    千次阅读 2012-11-22 00:25:59
    JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)> function TestBlack(TagName){  var obj = document.getElementById(TagName);  if(obj.style.display==""){  obj.style.display = "none";  }...
  • jqury 实现点击一个菜单,另一个展开的子菜单隐藏
  • 哈喽,大家下午好,时间过的真快,转眼啊又好长时间没写博客啦,嘿嘿最近公司比较忙,手上...要实现的效果是:点击标题内容显示,再次点击隐藏,同时切换箭头的状态,且默认第一组的内容显示。 好的,那我先给大家...
  • 今天在项目碰到一个问题,之前在项目首页实现单列表的显示和隐藏,通过wx:if判断就可实现,现在要实现多列表的单项显示和隐藏功能应该如何实现呢?下面小编给大家带来了微信小程序之多列表的显示和隐藏功能,感兴趣...
  • 每一项加一个boole属性,展开设置为true,关闭设置为false,根据boole来相应的展开关闭。 详情解决方案:首先写一个全局变量设为true,然后点击你的事件去进行三目判断,这样状态就改变了。 ...
  • Vue v-for循环列表控制显示隐藏 效果 点击第一章显示第一章下面所有的课时并隐藏其他章节的课时。 代码 实现方法 data() { return { chapterList: [], // 章节嵌套列表 activeIndex: -1, // 初始化点击的...
  • 需要考虑的点: 换行,展开的时遮住收起 1.不需要有固定在右侧的展开收起按钮,那么移动端直接用css3 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-...
  • 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了。 以下图为例的一个下拉菜单为参考: 效果实现源码: $...
  • 前端面试题(持续更新中)

    万次阅读 多人点赞 2019-11-06 17:16:33
    前端面试题 1.闭包 闭包就是能够读取其他函数内部变量的函数。 闭包的缺点:滥用闭包函数会造成内存泄露,因为闭包中引用到的包裹函数中定义的变量都 永远不会被释放,所以我们应该在必要的时候,及时释放这个闭包...
  • Idea使用教程

    千次阅读 多人点赞 2019-07-11 11:13:32
    先去idea的官方网站:https://www.jetbrains.com/idea 下载idea的安装包文件,点击DOWNLOAD进入到下载页面。 选择对应的操作系统版本,下载idea开发工具。可以选择.exe和.zip对应的版本进行下载。 下载好后的文件夹...
  • ``` ... <span class="title">{{menu.menuName}} ...比如:我点击第一元素,所有的secondAllLeverContainer都展开了,因为isShow是全局的,如何做,才能只执行当前循环体的中的事件呢
  • 首先设置内容的高度,并制定超出高度部分隐藏 &lt;div id='refer_a' style='height:80px;overflow:hidden'&gt;内容&lt;br /&gt; &lt;/div&gt; &lt;a href='#' onclick='slideDiv(\...
  • Postman

    千次阅读 2019-07-10 22:06:29
    您需要点击 蓝色发送按钮下的 代码链接打开GENERATE CODE SNIPPETS模式。 选择语言:使用下拉菜单选择语言 - 某些语言有多个选项。这可以让您选择不同的框架来提出请求。 Language ...
  • MATLAB--基于BP神经网络的手写数字识别

    千次阅读 多人点赞 2020-03-06 21:12:13
    接着,从8-13行,用嵌套的for循环语句,将图像分成5×5个网格,也就是说每个网格是10×10个像素点,然后统计每个网格中不为0的像素点的数量。 15行100-left就是每个网格中为0的像素点(黑色)的数量 第16行通过一个...
  • eclipse使用教程

    千次阅读 2019-03-09 11:17:11
    4.循环,回到 2.显示主菜单 public class FruitItem { int ID ; //商品编号 String name ; //商品名称 double price ; //商品单价 double number ; //商品数量 double money ; /...
  • TensorFlow入门

    千次阅读 多人点赞 2019-04-23 10:09:29
    它灵活的架构让你可以在多种平台上展开计算,例如台式计算机中的一个或多个CPU(或GPU),服务器,移动设备等等。 什么是数据流图(Data Flow Graph)? 数据流图用“结点”(nodes)和“线”(edges)的有向图来...
  • 在实际开发中,可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。 思路 为全局document添加click事件,判断是否为指定节点及其子节点,如果不是则隐藏该指定节点。 例如 当前...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,854
精华内容 4,741
关键字:

循环点击展开隐藏