Question

我找到了以下“显示更多”功能的解决方案，效果很好。我需要增强这个以使两个div同时扩展/隐藏。

How to create a "show more" button and specify how many lines of text can be initially shown

以下是我的更新代码，由于某种原因无效。

$(".show-more span").click( function() {
    var $this = $(this);
    var $content = $this.parent().prev("div.contentNav");
    var $contentDesc = $this.parent().prev("div.contentDesc");

    var linkText = $this.text().toUpperCase();

    if(linkText === "(SHOW LESS)"){
        linkText = "more...";
        $content.switchClass("showContent", "hideContent", 200);
        $contentDesc.switchClass("showContent", "hideContent", 200);

    } else {
        linkText = "(Show less)";
        $content.switchClass("hideContent", "showContent", 200);
        $contentDesc.switchClass("hideContent", "showContent", 200);
    }
    $this.text(linkText);
});

谢谢。

Answer 1

您的代码无效，因为它无法找到第二个div，请检查您的代码。要修复它，var $contentDesc = $this.parent().prev("div.content").prev();.

Answer 2

您的var $contentDesc = $this.prev("div.contentDesc");将其更改为var $contentDesc = $content.prev("div.contentDesc");

<强>样本

$(function() {
  $(".show-more span").click( function() {
    var $this = $(this);
    var $content = $this.parent().prev("div.contentNav");
    var $contentDesc = $content.prev("div.contentDesc");
    var linkText = $this.text().toUpperCase();

    if(linkText === "(SHOW LESS)") {
        linkText = "more...";
        $content.switchClass("showContent", "hideContent", 200);
        $contentDesc.switchClass("showContent", "hideContent", 200);

    } else {
        linkText = "(Show less)";
        $content.switchClass("hideContent", "showContent", 200);
        $contentDesc.switchClass("hideContent", "showContent", 200);
    }
    $this.text(linkText);
});
  });

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}
.showContent{
    height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

<div class="contentDesc hideContent"> 
		<p>Description</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repudiandae non sit incidunt totam, error optio animi possimus saepe quidem voluptate molestias neque excepturi hic. Omnis, pariatur, aliquid. Facere, alias!</p>
</div>
<div class="contentNav hideContent"> 
	<p>Navigation content</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor repudiandae non sit incidunt totam, error optio animi possimus saepe quidem voluptate molestias neque excepturi hic. Omnis, pariatur, aliquid. Facere, alias!</p>
</div>
<div class="show-more" style="text-align: center; text-align: center; cursor: pointer;"><span>more...</span> </div>

显示更多jquery以使用两个div

2 个答案: