精华内容
下载资源
问答
  • 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> </...

    在这里插入图片描述

    点击每一列,可以展开效果
    在这里插入图片描述

    实现原理:

    方法一:

    <ul id="app">
     <li v-for='item in items' @click="toggle(item)">
      <span v-if='item.show'>{{item.content}}</span>
     </li>
    </ul>
    new Vue({
     el: '#app',
     data: function() {
      return {
       items: [{
        content: '1 item',
        show: true
       }, {
        content: '2 item',
        show: true
       }, {
        content: '3 item',
        show: true
       }]
      }
     },
     methods: {
      toggle: function(item) {
          item.show = !item.show;
      }
     }
    })
    

    方法二:

    <template>
        <div class="test-wrapper">
            <div class="article-list-item" v-for="(item,index) in list" :key="index"
            @click="ArticleDetail(index)">
                <div class="shareAnimate" v-show="activeIndex===index">
                    {{item.name}}
                </div>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        name: "test",
        data() {
            return {
                activeIndex: -1 // 初始化点击的索引值
            };
        },
        methods: {
            ArticleDetail(index) {
                this.activeIndex = index;
            }
        }
    }
    </script>
    
    展开全文
  • 为了更好的用户体验,在做下拉获取其他有弹出层的时候,当展开下拉时,要做到点击其他区域也能自动隐藏收起下拉和遮罩层,这样的效果用一段js就可以了。 以下图为例的一个下拉菜单为参考: 效果实现源码: $...
  • ``` ... <span class="title">{{menu.menuName}} ...比如:我点击第一元素,所有的secondAllLeverContainer都展开了,因为isShow是全局的,如何做,才能只执行当前循环体的中的事件呢
  • 代码编写思路一、从第七条开始隐藏后面的内容(除最后一条除外)二、获取按钮给按钮添加onclick事件三、当用户点击“显示全部小说”的按钮时,执行以下操作四、当用户点击“精选显示小说”的按钮时,执行以下操作五...

    这篇文章是介绍一下jQuery实现列表的展开缩放效果,虽然也有人已经分享过这种方法但是我想总结一下这个方法具体是如何实现的!希望初学的朋友们看到这篇文章能有所收获!


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、从第七条开始隐藏后面的内容(除最后一条除外)

    先获取< ul >元素下索引值大于5的< li >元素集合,然后去掉集合元素中的最后一个元素。使用选择器的方法获取。
    代码如下(示例):

    var $category = $('ul li:gt(5):not(:last)') ;//获得索引值大于5的集合对象(除最后一条)
    

    二、获取按钮给按钮添加onclick事件

    代码如下(示例):

    var $toggleBtn = $('div.showmore>a'); //获取“显示全部小说”的按钮
    

    三、当用户点击“显示全部小说”的按钮时,执行以下操作

    需要实现以下功能:(1)显示隐藏的品牌。(2)“显示全部小说”文本切换成“精简显示小说。(3)高亮显示推荐品牌
    (1)显示隐藏的品牌使用show()方法;
    (2)使用find()方法在元素内寻找匹配元素。再使用text()方法设置所有匹配元素的文本内容。
    (3)使用filter()方法筛选出需要高亮显示的元素。addclass()为匹配元素添加指定的类名来增加高亮效果。

    代码如下(示例):

    $category.show(); //显示$category
       $(this).find('span')
        .text("精简显示小说");//改变文本
       $('ul li').filter(":contains('第九特区'),:contains('万古第一神'),:contains('斩月')").addClass("promoted");
       //添加高亮样式
    

    四、当用户点击“精选显示小说”的按钮时,执行以下操作

    需要实现以下功能:(1)从第七条开始隐藏后面的小说(最后一条 除外)(2)“精选显示小说”文本切换成“显示全部小说。(3)取消高亮显示推荐品牌
    方法类似第三点

    代码如下(示例):

    $category.hide(); //隐藏$category
       $(this).find('span')
        .text("显示全部小说");//改变文本
       $('ul li').removeClass("promoted"); //去掉高亮样式
    

    五、需要通过if语句循环进行点击按钮的不同显示效果

    代码如下(示例):
    if($category.is(":visible")) { //如果元素显示
    //元素隐藏
    }else{
    //元素显示
    }
    

    六、完整代码

    代码如下(示例):
    $(function() {
     var $category = $('ul li:gt(5):not(:last)') //获得索引值大于5的集合对象(除最后一条)
     
     $category.hide(); //隐藏上面获取到的jque对象
     var $toggleBtn = $('div.showmore>a'); //获取“显示全部小说”的按钮
     $toggleBtn.click(function() { //给按钮添加onclick事件
      if($category.is(":visible")) { //如果元素显示
       $category.hide(); //隐藏$category
       $(this).find('span')
        .text("显示全部小说");//改变文本
       $('ul li').removeClass("promoted"); //去掉高亮样式
      } else {
       $category.show(); //显示$category
       $(this).find('span')
        .text("精简显示小说");//改变文本
       $('ul li').filter(":contains('第九特区'),:contains('万股第一神'),:contains('斩月')").addClass("promoted");
       //添加高亮样式
      }
      return false; //超链接不跳转
     })
    })
    

    总结

    希望这篇文章可以帮助到那些还在学习当中不太了解代码原理的同学们,虽然我也是初学者,也会经历迷茫期,但我相信一句话:”每天进步一点点,我不知道未来如何,但我能抓住当下,努力成为很哇塞的女生!“你我一起共勉!你我一起加油!

    展开全文
  • 所以我偷偷看了有赞的源码,了解了它的思想:给每一项增加唯一标识符,新建一个数组用于存放需要展开项的唯一标识符,在节点中判断数组中是否存在当前点击展开的标识符,存在则展开,隐藏则是出栈当前的标识符 ...

    笔者根据业务需求做了一个折叠面板(手风琴风格,即点击按钮只展示一个)
    类似于有赞vant-weapp这种。
    在这里插入图片描述
    后来我看到有赞的基础风格(即点一个展开一个,点击隐藏只隐藏当前的),但不知道如何实现
    在这里插入图片描述
    所以我偷偷看了有赞的源码,了解了它的思想:给每一项增加唯一标识符,新建一个数组用于存放需要展开项的唯一标识符,在节点中判断数组中是否存在当前点击展开的标识符,存在则展开,隐藏则是出栈当前的标识符

    微信小程序不支持像vue一样的{{ arr.includes(id) }}这种直接调用函数或者过滤器,需要用到微信脚本语言wxs,有了它妈妈再也不用担心我在wxml用不了过滤器和函数啦

    话不多说看例子
    在这里插入图片描述

    这个是循环遍历出来的,我要求每点击一个查看更多展开当前项,如:

    在这里插入图片描述

    每点击一次隐藏详情,仅隐藏当前项

    在这里插入图片描述

    怎么实现呢¿

    首先要确定需要隐藏的内容,将隐藏的内容包裹起来,根据条件判断让它显示,这里的条件就是:标识符数组里包含当前要展开的标识符arr是[],我现在要展开了,就把当前要展开的标志符放进arr;[111, 222]说明要展开的只有111,222两个,即条件
    在这里插入图片描述
    怎么判断的¿就是上面wx:show的条件

    我们可以直接在当前页面用<wxs module = "m">标签写,也可以单独创建文件夹在页面中<wxs src="../../example" module = "m">引进来,这个module必不可少

    在这里插入图片描述
    这里是新建文件写的,在页面中调用时,传入标识符数组,当前标识符,在标识符数组中找当前这个标识符,找到了返回true,没找到返回false,页面就是根据这个布尔值进行展开和隐藏的

    贴代码

    <template>
      <view class="container" style="height: {{mainHeight}}px">
        <view class="panel" wx:for="{{list}}" wx:key="index">
          <view class="flexDirection mb16 cell">
            <view class="item_text tl">姓名:</view>
            <view class="item_text tr" style="color: #242424">{{item.name || '暂无数据'}}</view>
          </view>
          <view wx:show="{{m.isContain(collapse, item.id)}}">
            <view class="flexDirection mb16 cell">
              <view class="item_text tl">性别:</view>
              <view class="item_text tr" style="color: #242424">{{item.sex || '暂无数据'}}</view>
            </view>
            <view class="flexDirection mb16 cell">
              <view class="item_text tl">年龄:</view>
              <view class="item_text tr" style="color: #242424">{{item.age || '暂无数据'}}</view>
            </view>
          </view>
          <view
            class="expand"
            wx:show="{{ !m.isContain(collapse, item.id) }}"
            bindtap="toExpand(item.id)"
          >
            查看更多
            <van-icon name="arrow-down" />
          </view>
          <view
            class="expand"
            wx:show="{{ m.isContain(collapse, item.id) }}"
            bindtap="toHidden(item.id)"
          >
            隐藏详情
            <van-icon name="arrow-up" />
          </view>
        </view>
        <wxs module="m" src ="../wxs/collapse_use.wxs"/>
        <!-- <wxs module="m">
          var isContain = function(array, item) { -->
          <!--数组里去找这个id,找得到返回true,找不到返回false  -->
          <!-- return array.indexOf(item) == -1 ? false : true
          }
          module.exports.isContain = isContain
        </wxs> -->
      </view>
    </template>
    <script>
    import { createPage } from '@mpxjs/core'
    const app = getApp()
    createPage({
      data: {
        mainHeight: app.globalData.mainHeight,
        list: [
          {
            age: 18,
            name: '王冰冰',
            sex: '女',
            id: 111
          },
          {
            age: 19,
            name: '张三',
            sex: '男',
            id: 222
          },
          {
            age: 22,
            name: '李四',
            sex: '男',
            id: 333
          }
        ],
        collapse: []
      },
      methods: {
        // 点击展开
        toExpand(id) {
          console.log('需要展开的ID', id)
          this.collapse.push(id)
        },
        // 隐藏详情
        toHidden(id) {
          console.log('需要隐藏的ID', id)
          this.collapse.splice(this.collapse.indexOf(id), 1)
        }
      }
    })
    </script>
    <style lang="stylus" scoped>
    .container
      width 100%
      box-sizing border-box
      .panel
        width 100%
        padding 20rpx 30rpx 20rpx 30rpx
        box-sizing border-box
    .item_title
      font-size 32rpx
      font-weight bolder
      text-align center
      color #242424
    .item_text
      font-size 32rpx
      color #909090
    .mb16
      margin-bottom 16rpx
    .tl
      text-align left
    .tr
      text-align right
    .tip
      box-sizing border-box
      width 100%
      height 80rpx
      font-size 32rpx
      color #909090
      text-align center
      line-height 80rpx
    .cell
      padding 10rpx 0
    .expand
      background #fafafa
      width 100%
      height 50rpx
      text-align center
      font-size 26rpx
      line-height 50rpx
      color #E92F20
    .operateicon
      color #E92F20
    </style>
    <script type="application/json">
      {
        "navigationBarTitleText": "折叠面板",
        "usingComponents": {
          "van-icon": "@vant-weapp/weapp/dist/icon/index"
        }
      }
    </script>
    

    效果图

    在这里插入图片描述

    展开全文
  • 点击一个按钮,输入就弹出来...实例演示:点击按钮出现输入框,同时改变按钮的说明文字,再次点击按钮则隐藏输入框,按钮回到原始状态。如此循环。 HTML代码: &lt;div class="box"&gt; &l...

    点击一个按钮,输入就弹出来,按钮也随之改变,再点击就收起输入框,按钮就变回之前那个

    jQuery的 toggle() 方法来切换元素的显示和隐藏:显示被隐藏的元素,并隐藏已显示的元素,从而实现上述功能。

    实例演示:点击按钮出现输入框,同时改变按钮的说明文字,再次点击按钮则隐藏输入框,按钮回到原始状态。如此循环。

    HTML代码:

    <div class="box">
        <span>点击按钮实现展开和收起输入框的切换:</span>
        <div class="content">
            <span>请发表你的看法</span><input type="button" value="好的">
            <div class="test"><textarea></textarea></div>
        </div>   
    </div>

    CSS样式:

    div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
    div.box span{color:#999;font-style:italic;}
    div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
    textarea{width:250px;height:100px;margin:10px 0;border:1px solid #6699cc;}

    JS代码:

    $(function(){
        $(".test").hide();  // 默认隐藏状态
        $(":button").click(function() {
            $(".test").toggle('slow');  // 改变显隐状态
            $(this).val($(this).val()=="好的"?"我不想说了":"好的"); // 改变按钮的文字说明
        })
    })

    重要注意:

    $(this).val($(this).val()=="好的"?"我不想说了":"好的"); // 改变按钮的文字说明

    展开全文
  • 一个列表的文章内容过长,显示的时候要省略显示,但是还要有一个展开查看全文的点击事件,可以实现展开与折叠。 实现思路: 使用两层容器,父标签设置max-height,预计成要显示行数的高度,并且使用overflow:...
  • 首先看看上面的这个图,很简单的一个二级分类,点击大分类出来小分类,一般我们都会采用js去实现这中效果,问题就在于,当你重新刷新页面的时候,又折回到原始状态了,这样效果很不好,大家也可能会碰到这种问题,...
  • 这里是想要点击一级标题来收缩与展开二级标题,这些数据时循环一个数组得到,解决办法是给这个数组的每一个对象中添加一个boolean类型的属性,点击的时候如果该属性为true,则变为false,如果原来是false,则变为...
  • i++) { //循环创建每个子节点 _child = _children[i]; _node = document.createElement("div"); //每个节点对应一个新div _node.id = _child.getAttribute("id"); //节点的id值就是获取数据中的id属性值 _...
  • JS、JQuery、CSS+DIV实例大全

    千次下载 热门讨论 2012-07-12 14:03:21
    13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色简洁风格横向三级网站导航菜单 15.jquery简洁动感支持三级的黑色导航菜单 16.jquery类似TAB一样的动感菜单下载 17.jquery绿色动感滑动下拉多级导航...
  • 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色简洁风格横向三级网站导航菜单 15.jquery简洁动感支持三级的黑色导航菜单 16.jquery类似TAB一样的动感菜单下载 17.jquery绿色动感滑动下拉多级导航...
  • 13.jquery黑色循环滚动菜单特效插件下载 14.jquery灰色简洁风格横向三级网站导航菜单 15.jquery简洁动感支持三级的黑色导航菜单 16.jquery类似TAB一样的动感菜单下载 17.jquery绿色动感滑动下拉多级导航...
  • 13. jquery黑色循环滚动菜单特效插件下载 14. jquery灰色简洁风格横向三级网站导航菜单 15. jquery简洁动感支持三级的黑色导航菜单 16. jquery类似TAB一样的动感菜单下载 17. jquery绿色动感滑动下拉多级导航菜单...
  • 先上效果图 前言 前些天有个朋友问我,要实现一个树状的列表要怎么做,根据一个完全符合规则但是却很头疼的一个Json解析来实现,见下格式,对于有些Android开发者来说,这个Json或许并不友好,没有办法直接转成...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的点击事件(feedback:yymaoji)。 +2009-11-26 v2.1.6 +修正动态创建Grid列的BUG(feedback:gxpan)。 -...
  • -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的点击事件(feedback:yymaoji)。 +2009-11-26 v2.1.6 +修正动态创建Grid列的BUG(feedback:gxpan)。 -...
  • 8.13.1 触摸事件模式:触摸并不是点击 269 8.13.2 原生及自定义的触摸事件处理 272 8.13.3 创建可触摸的设计元素 273 8.13.4 设备朝向变更事件 274 8.13.5 屏幕朝向变更的媒体查询 275 8.14 扩展ios开发...
  • iPhone开发秘籍(第2版)--源代码

    热门讨论 2012-12-11 13:51:22
    CruiseYoung提供的带有详细书签的电子书籍目录 ... 该资料是《iPhone开发秘籍:第2版》的源代码 对应的书籍资料见: iPhone开发秘籍:第2版(iphone开发必备佳作,在第一版的基础上进行了全面修订和大量扩充) ...
  • 修改扩展界面支持库一,解决树形框项目无法通过鼠标点击进入编辑状态的BUG。 6. 修改高级表格支持库,解决插入行/插入列在未指定行号/列号的情况下插入位置不正确的BUG。 7. 修改文本语音转换支持库,增加“机读...

空空如也

空空如也

1 2
收藏数 21
精华内容 8
关键字:

循环点击展开隐藏