javascript - 如何使用 Jquery 从 Button 切换阅读更多内容？

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类是. 我正在使用 jquery 将文本裁剪为有限数量的单词。pdisplay: hidden

// 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如何使用不是直接兄弟的按钮切换上方的文本？

标签： javascriptjqueryhtml

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>