时间戳

首页 > 解决方案 > 为什么打开和关闭后展开的卡片预览文字增加了？

javascript - 为什么打开和关闭后展开的卡片预览文字增加了？

问题描述

我找到了我希望使用的这个 Codepen，它非常完美，除了打开和关闭卡片后，预览文本比打开之前显示的更多。

https://codepen.io/Beardwig/pen/RZExaj

我认为这与这门课有关，但我不完全确定

<div class='expd-truncate'>

这是 Codepen 的链接，非常感谢任何帮助。

谢谢

标签： javascripthtmlcsscodepen

解决方案

问题不在于类，实际上也不是 CSS，而是在扩展和收缩卡片后，卡片内部的内容过多，其中div.expd-truncate的p标签 - 在扩展之前，它是对.snipper方法的调用该文档已准备好，它会截断该内容并附加一个省略号以防止内容过长。我指的是 CodePen 第 74 行的这部分代码：

$(document).ready(function(){
  $('.expd-truncate').snipper({height: '60px'});
});

该错误是由在.snipper更改管理被剪切的内容显示的类之前调用​​的方法引起的，当单击用于收回/取消展开卡片的按钮时。因此，当卡片被收回时，内容被剪断，然后类发生变化，布局也随之改变，内容重排，现在内容最终的高度与被剪断时不同。

因此解决方案是在类更改后简单地调用该.snipper方法（即第 117 行 ( $('.expd-truncate',thisCard).snipper({height: '60px'});) 应位于第 118-121 行下方）。

请参阅我用上面的 CodePen 制作的这个 fork 以进行工作演示： https ://codepen.io/anon/pen/GBezWG

或者查看这个工作片段中的 JS，它是等效的，但使用纯 HTML 和 CSS：

(function($){
	"use strict"
	
	$.fn.snipper = function(options) {
		var opts = $.extend({}, $.fn.snipper.defaults, options),
			trimText = function($el, height, ellipsis) {
				// Make sure HTML entities only count as one character
				var ellipsisNumChars = ellipsis.replace(/&[^;]+?;/g, '.').length;

				while ($el.outerHeight() > height) {
					if ($el.text().length <= ellipsisNumChars) {
						break;
					}

					$el.html(function(i, text) {
						if (/\s/.test(text)) {
							return text.replace(/\s*(\S)*$/, ellipsis);
						}
						
						// If there is just one really long string without spaces
						// start stripping the last character and concatinating the ellipsis
						return text.replace(new RegEx('.{' + (ellipsisNumChars + 1) + '}$'), ellipsis);
					});
				}
			};

		this.each(function(){
			var $el = $(this),
				fullText = opts.fullText || $el.data('snipper:fullText'),
				height = opts.height,
				ellipsis = opts.ellipsis || '';

			// If height is a function get its return value
			if (typeof(height) === 'function') {
				height = height.apply(this);
			}

			if (!height) {
				return;
			}

			height = parseInt(height, 10);

			if (isNaN(height)) {
				return;
			}

			if (fullText) {
				if (typeof(fullText) === 'function') {
					fullText = fullText.apply(this);
				}

				$el.html(fullText);
			} else {
				$el.data('snipper:fullText', $el.html());
			}

			trimText($el, height, ellipsis);
		});

		return this;
	};
	
	$.fn.snipper.defaults = {
		ellipsis: '&hellip;'
	};
}(jQuery))

//none/grow pulse/grow, bounceIn/grow, BounceInUp/slide, fadeInUp/slide, lightSpeedIn/slide, rotateInUpLeft/fade, rollIn/slide, zoomIn/fade, slideInUp/slide
var speed = 300,
    animClassIn = "pulse",
    animClassOut = "fadeIn",
    expandStyle = "grow";
$(document).ready(function(){
  $('.expd-truncate').snipper({height: '60px'});
});
//
//Expand
//
$(document).on("click",".wrap-expd-card .expd-card-toggle" , function() {
  var thisCard = $(this).closest(".expd-card"),
      cardLeft = thisCard.offset().left,
      cardTop = thisCard.offset().top - $(window).scrollTop();
  $('.expd-truncate',thisCard).snipper({height: '9999px'});
  thisCard.parent(".wrap-expd-card").addClass("expd-hold");
  thisCard.prependTo("body");
  $("body").addClass("expd-body");
  thisCard.addClass("expd-pre-anim").css({left: cardLeft, top: cardTop});
  thisCard.removeClass("out-anim "+animClassOut);
  thisCard.css('opacity');
  if(expandStyle == "grow") {
    thisCard.removeClass("expd-pre-anim").addClass("expd-active").css({left: 0, top: 0, transition: "all "+speed+"ms ease", opacity: 1});
    thisCard.addClass(animClassIn);
  } else if (expandStyle == "slide") {
    thisCard.animate({
      top: '100%'
    }, 100, function () {
      thisCard.removeClass("expd-pre-anim").addClass("expd-active");
    }).promise().done(function () {
      thisCard.addClass(animClassIn);
    }); 
  } else if (expandStyle == "fade") {
    thisCard.removeClass("expd-pre-anim").addClass("expd-active").css({left: 0, top: 0,opacity: 1, transition: "opacity "+speed+"ms"});
    thisCard.addClass(animClassIn);
  }
});
//
//Retract
//
$(document).on("click",".expd-body .expd-card-toggle", function() {
  var thisCard = $(this).closest(".expd-card"),
      cardLeft = $(".expd-hold").offset().left,
      cardTop = $(".expd-hold").offset().top - $(window).scrollTop();
  thisCard.removeClass("expd-active "+animClassIn).addClass("expd-pre-anim").css({left: cardLeft, top: cardTop, opacity: 0});
  thisCard.animate({scrollTop:0},speed);
  //setTimeout(function(){ 
  thisCard.removeClass("expd-pre-anim").css({left: 0, top: 0, opacity: 1}); 
  thisCard.appendTo(".wrap-expd-card.expd-hold").addClass(animClassOut);
  $(".wrap-expd-card").removeClass("expd-hold");
  $("body").removeClass("expd-body");
  $('.expd-truncate',thisCard).snipper({height: '60px'});
  //}, 0);//
});
body {
  background: #333;
}
.expd-card,
.expd-card * {
  box-sizing: border-box;
}
.wrap-expd-card {
  width: 320px;
  height: 320px;
  float: left;
  margin: 16px;
}
.expd-card.fadeIn {
  animation-duration: 300ms;
  animation-delay: 0ms;
}
.expd-card {
  font-family: Roboto, sans-serif;
  color: #7c7c7c;
  background: #fff;
  position: relative;
  width: 320px;
  height: 320px;
  border: 1px solid #ccc;
  overflow: hidden;
  animation-duration: 400ms;
  animation-delay: 200ms;
  animation-iteration-count: 1;
}
.expd-card .expd-card-body-wrap {
  max-width: 960px;
  margin: 0 auto;
}
.expd-card .expd-card-body-wrap .expd-card-img {
  height: 0px;
  padding-bottom: 56.25%;
  background: #bbb;
}
.expd-card .expd-card-body-wrap .expd-card-content {
  margin: 18px 16px;
  position: relative;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-card-toggle {
  position: absolute;
  cursor: pointer;
  height: 40px;
  width: 40px;
  background: #f00;
  right: 16px;
  top: -36px;
  border-radius: 50%;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-heading h2 {
  color: #383838;
  font-size: 20px;
  margin: 0;
}
.expd-card .expd-card-body-wrap .expd-card-content .expd-heading strong {
  color: #585858;
  font-size: 14px;
}
.expd-card .expd-card-body-wrap .expd-card-content p {
  font-size: 14px;
  margin: 10px 0px;
}
.expd-body {
  overflow: hidden;
}
.expd-card.expd-pre-anim {
  position: fixed;
  z-index: 99;
}
.expd-card.expd-active {
  position: fixed;
  z-index: 99;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: scroll;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8" />
		<meta name="viewport" content="initial-scale=1.0, width=device-width" />
		<title>fiddle</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="script.js"></script>
	</head>
	<body class="">
		<div class="wrap-expd-card">
			<div class="expd-card animated fadeIn" style="left: 0px; top: 0px; transition: all 300ms ease 0s; opacity: 1;">
				<div class="expd-card-body-wrap">
					<div class="expd-card-img">
					</div>
					<div class="expd-card-content">
						<div class="expd-card-toggle">
						</div>
						<div class="expd-heading">
							<h2>Lorem Ipsum</h2>
							<strong>Subtitle</strong>
						</div>
						<div class="expd-truncate">
							<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
							<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
							<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
							<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wrap-expd-card">
			<div class="expd-card animated">
				<div class="expd-card-body-wrap">
					<div class="expd-card-img">
					</div>
					<div class="expd-card-content">
						<div class="expd-card-toggle">
						</div>
						<div class="expd-heading">
							<h2>Lorem Ipsum</h2>
							<strong>Subtitle</strong>
						</div>
						<div class="expd-truncate">
							<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
							<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
							<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
							<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="wrap-expd-card">
			<div class="expd-card animated">
				<div class="expd-card-body-wrap">
					<div class="expd-card-img">
					</div>
					<div class="expd-card-content">
						<div class="expd-card-toggle">
						</div>
						<div class="expd-heading">
							<h2>Lorem Ipsum</h2>
							<strong>Subtitle</strong>
						</div>
						<div class="expd-truncate">
							<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
							<p>Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
							<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec rutrum congue leo eget malesuada.</p>
							<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Pellentesque in ipsum id orci porta dapibus.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

推荐阅读