0
私はJqueryプラグインの作成を見ていましたが、Jqueryプラグイン開発のベストプラクティスも学びました。Jqueryプラグインの開発を使用して段落を表示および非表示にする方法は?
私がする必要があるのは、more
をクリックして完全なコンテンツを表示する必要がある場合で、もう一度クリックして非表示にする場合です。私に手伝ってもらえますか?
(function() {
$.fn.textCounter = function(className, textCount) {
return this.each(function() {
var title = $('.' + className).text();
if (title.length > textCount) {
var content = title.substr(0, textCount) + ' ....';
$('.' + className).text(content).append('<span class="showcontent">More <i class="fa fa-angle-down" aria-hidden="true"></i></span>');
} else {
$('.' + className).text(title);
}
});
};
}());
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Word/Text Counter Plugins</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Start second row -->
<section class="details-row-second">
<div class="container content-box">
<div class="col-xs-12 col-sm-6 col-md-6">
<h2>WHO WE ARE ?</h2>
<p class="contentClass">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="hidden-xs col-sm-6 col-md-6">
</div>
</div>
</section>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".contentClass").textCounter('contentClass', '300');
});
</script>
</html>
私はそれを得ました、たくさんありがとう – Prasanga
これをするのを手伝ってください。 – Prasanga