Question

我有这个文本，我想用Jquery切换。

<div class="section-right">
    <h1>
         about us
    </h1>
    <h2>
        real fitness depends on excercise.
    </h2>
    <div class="detail-text" data-simplebar data-simplebar-auto-hide="false">
        <p class="more">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        </p>
    </div>
    <button class="myButton readMore">
        <span>
            More About
        </span>
        <div><img src="assets/images/rightArrow.png" alt="arrow"></div>
    </button>
</div>

more标记中的p类为display: hidden。我正在用jQuery将文本裁剪为有限数量的单词。

// Readmore Text
var showChar = 100;
$('.more').each(function () {
    var content = $(this).html();

    if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + "..." + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;</span>';

        $(this).html(html);
    }
});

$(".readMore").click(function () {
    // $(this).prev('.detail-text p').slideToggle(500);
    // $(this).prev('.detail-text p').toggleClass('more');
});

我的逻辑是切换more按钮同级的readmore类。如何使用非直接同级按钮切换文本上方？

Answer 1

我认为这对您有用：

// Readmore Text
var showChar = 100;
$('.more').each(function () {
	var content = $(this).html();

	if (content.length > showChar) {
		var c = content.substr(0, showChar);
		var h = content.substr(showChar, content.length - showChar);

		var html = c + '<span class="moreellipses">' + "..." + '&nbsp;</span><span class="morecontent">' + h + '<span></span>&nbsp;&nbsp;</span>';
		$(this).html(html);
	}
});

$(".readMore").click(function () {
    $(this).siblings('.detail-text').children('p').toggleClass('more');
});

p span.moreellipses{
	display: none;
}
p.more span.moreellipses{
	display: inline;
}
.more span.morecontent{
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-right">
	<h1>
		about us
	</h1>
	<h2>
		real fitness depends on excercise.
	</h2>
	<div class="detail-text" data-simplebar data-simplebar-auto-hide="false">
		<p class="more">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
		</p>
	</div>
	<button class="myButton readMore">
		<span>
			More About
		</span>
		<div><img src="assets/images/rightArrow.png" alt="arrow"></div>
	</button>
</div>

如何使用Jquery从Button中获取更多信息？

1 个答案: