改变容器高度,显示隐藏数据内容

  • 动态的改变盒子高度,显示隐藏盒子内容。
<div class="method-2-wrap wrap">
  <div class="faa1">功能</div>
  <div class="title">
    <article>测试</article>
    <article>测试</article>
    <article>测试</article>
    <article>测试</article>
  </div>
  <div class="content">点击</div>
</div>
<div class="method-2-wrap wrap">
  <div class="faa1">功能</div>
  <div class="title">
    <article>测试</article>
    <article>测试</article>
    <article>测试</article>
    <article>测试</article>
  </div>
  <div class="content">点击</div>
</div>
<script type="text/javascript">
  $(function(){
    var i=0;
    $(".content").click(function(){
       i++;
       i%2 !==0 ? $(this).siblings("div.title").css({‘height‘:‘400px‘}) : $(this).siblings("div.title").css({‘height‘:‘100px‘});
    })
  })
</script>

  

时间: 2024-11-07 09:04:15

改变容器高度,显示隐藏数据内容的相关文章

页面内容添加新的显示或者显示隐藏的内容,滚动条滚动到最低端,显示出新内容

<script> var isDisplayLog = false; function displayLog() { if (isDisplayLog == false) { $("#gridList2").show(); gridList2(); home.scrollIntoView(false);//主要是采用这句,home是div,当前页面中显示滚动条的元素:这句话就是当前div的滚动条显示在到最低端: isDisplayLog = true; } } </s

如果写一个点击view带动画的下滑展开显示隐藏内容的控件

原理是在onMeasure中得到隐藏内容的高度,点击这个view的时候对隐藏的view startAnimation,让它的高度从0增长到onMeasure得到的这个View的measureHeight 具体这样写: public class ExpandableLayout extends LinearLayout { private Context mContext; private LinearLayout mHandleView; private RelativeLayout mCont

vue 点击,鼠标移动上去显示隐藏

1,鼠标点击显示隐藏,样式可以自己调,我就写个dome. <div class="min"> <button @click="change">点击我</button> <div v-show="show"> 显示隐藏的内容 </div> </div> <script> export default { name: "testresult", d

内容的显示/隐藏&amp;&amp;拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>显示/隐藏&&拖拽</title></head><style> *{ margin: 0; padding: 0; } #box{ position: relative; } input{ cursor: pointer;

EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)

http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     askilledhand ADD.幼儿园 UID 2186431 帖子 46 精华 0 积分 34 最后登录 2014-3-5 串个门 加好友 打招呼 发消息 电梯直达 1楼  发表于 2013-11-18 11:59:03 |只看该作者 |倒序浏览  一键分享 [新人报到]现在去发帖报道即可领取论坛金币哦

JS实现点击参数面板按钮显示或隐藏数据

当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: /*获取隐藏的标签控件的值*/ var la

HTML5--》点击显示隐藏内容

<details>浏览器支持比较差,可以用JavaScript实现这种功能. 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>js点击显示隐藏内容</title> 6 <style type="text/css" > 7 body{font-size:12px;} 8 span{f

[ jquery 效果 slideDown([speed,[easing],[fn]]) slideUp([speed,[easing],[fn]]) ] 此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅

此方法用于滑动显示隐藏的被选元素:动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来.在jQuery 1.3中,上下的padding和margin也会被有动画,效果更流畅 实例: <!DOCTYPE html><html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my

css实现 鼠标移上放大效果 或 显示隐藏内容 简单原型

适当调整即可变为图片放大镜效果,或者鼠标移上去显示隐藏内容(ie6对hover支持不够完善,推荐在火狐或谷歌中观看). 效果如图: css: .demo {        width: 318px;        margin: 100px auto 0 auto;    } .demo:after {        content: "";        display: block;        height: 0;        clear: both;    } .demo