“查看更多”--和--“点击收起”(模拟开关事件)

原理:

1、首先定义一个开关(其实就是一个标志),默认为开;

2、定义或者获取默认显示的容器(container)的高度(heightm);

3、点击按钮(#more-news-media)时,如果为“开(true)”,则容器(container)的高设为自动(auto),就将显示所有,此时将开关置为“关”,将按钮上的文字设为“点击收起”;如果为“关(false)”,则容器的高设为第二步中“定义或获取”的高度,此时将开关置为“开”,将按钮上的文字设为“查看更多”。

        /*查看更多*/
	function fn1(){
		var tog=true;
		var heightm=$(‘.row‘).height()*4;
		$(‘.container‘).height(heightm);
		$(‘#more-news-media‘).click(function(){
			if(tog){
				$(‘.container‘).css(‘height‘, ‘auto‘);
				$(‘#more-news-media‘).html(‘点击收起‘);
				tog=false;
			}else{
				$(‘.container‘).css(‘height‘, heightm);
				$(‘#more-news-media‘).html(‘查看更多‘);
				tog=true;
			}
		})
	}fn1();

  

时间: 2024-07-30 10:19:38

“查看更多”--和--“点击收起”(模拟开关事件)的相关文章

jquery 点击查看更多箭头变化,文字变化,超出带滚动条。

从网上好了好久,没找到自己要的,自己写了一下. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>more_up_arrows</title> <style type="text/css"> .w1000{width:1000px;margin:0 auto;} .mgt10{margin-top:10px;}

折叠多余文本内容,点击查看更多

command:设定规定的行数,当文本内容超过时,折叠并有一个“查看更多”的按钮 step1:编写html...... <p statue="0" class="text close_text"> //status是自定义的属性,“0”是false,“1”为True texttexttextvvshjhhsbcnxgfggggkshjahcjbkjciwhiuheohbcjkbcnzlkxkjidjoieklkxm.,cxzmkcowdjijdpoweo

jquery如何实现点击回车键触发事件

jquery如何实现点击回车键触发事件:有时候我们想点击回车的时候能够让代码去干一些事情,这个时候我们就需要判断按下的键是否是回车,下面就简单介绍一下如何实现此功能,核心代码如下: $(function (){ document.onkeydown=function(ev) { var ev =ev||window.event||arguments.callee.caller.arguments[0]; if(ev&&ev.keyCode==13) { //需要的操作代码 } } }) 代

查看更多

<script type="text/javascript">     var hflag=1;     $(".jiamore").click(function(){         if(hflag){            $(".table-display").show();            $(this).html("收起");            hflag=0;                

iOS点击cell查看大图,点击大图还原小图-b

一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图片,放大图片,滑动图片.再点击大图,图片回到相应的位置. gif1.gif 如图gif2.gif所示.当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部:若在底部,则回到底部. gif2.gif 二.常见场景 微博.微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollVi

iOS点击cell查看大图,点击大图还原小图

一.项目需求 用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片.点击放大的图片,图片缩小到原先的尺寸. 如图gif1.gif所示,点击中间的图片,放大图片,滑动图片.再点击大图,图片回到相应的位置. gif1.gif 如图gif2.gif所示.当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部:若在底部,则回到底部. gif2.gif 二.常见场景 微博.微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollVi

【iOS】UIAlertView 点击跳转事件

iOS 开发中,UIAlertView 经常用到.这里记录下曾用到的点击跳转事件. UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"退出" delegate:self cancelButtonTitle:@"确认" otherButtonTitles:nil]; if ([@"请记住新密码" isEqualToString:resu

列表点击当前伸开再次点击收起,点击当前伸开后点击别的列表,别的列表伸开,其余的收起

$(function() { $('section').click(function(){ // 点击当前展开再次点击收起 if($(this).attr('isclick') == 'yes'){ $(this).find('div').css('display','none'); $('section').removeAttr('isclick'); return; } // 点击当前展开别的收起 $('section').find('div').css('display','none');

点击子元素事件不触发父元素事件

<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> <style type="text/css">