显示更多 jquery 以使用两个 div

Posted 2023-03-31

【中文标题】显示更多 jquery 以使用两个 div

【英文标题】：Show more jquery to work with two divs

【发布时间】：2016-01-07 13:15:29

【问题描述】：

我找到了以下“显示更多”功能的解决方案，效果很好。我需要增强它以使两个 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);
);

谢谢。

【问题讨论】：

如果另一个div有相同的类名，改变var $this = $(this);到 $('.show-more span');这将显示/隐藏所有而不是这个上下文

@Syahrul，感谢您的意见；我替换了“var $this = $(this);”用“var $this = $('.show-more span');”但这没有用。

【参考方案1】：

您的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>

【参考方案2】：

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

【讨论】：

@Blaze 我只是编辑帖子，解决方案所有者是 Hashy ;-)

@Hashy - 我试过你的建议，但没有奏效。这是我正在使用的 html。 [代码] 描述..... 导航内容 more... [code]

@Blaze k，然后根据您的代码，您可以输入 $contentDesc = $content.prev();这也行