顯示更多jquery與兩個div一起工作

我發現了以下解決方案，用於「顯示更多」功能，這非常棒。我需要加強這個功能，讓兩個div同時展開/隱藏。顯示更多jquery與兩個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); 
});

謝謝。

來源

2015-10-09 Blaze

如果其他分區具有相同的類名，改變變量$此= $（本）;到$（'。show-more span'）;這將顯示/隱藏所有，而不是此背景 – slashsharp

@Syahrul，感謝您的意見;我替換了「var $ this = $（this）;」「var $ this = $（'。show-more span'）;」但那不起作用。 – Blaze

你var $contentDesc = $this.prev("div.contentDesc");改變它var $contentDesc = $content.prev("div.contentDesc");

DEMO

$(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"> 
 
\t \t <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"> 
 
\t <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>

來源

2015-10-10 08:43:59 slashsharp

你的代碼不工作，因爲它找不到第二個div，所以檢查你的代碼。要修復它說，var $contentDesc = $this.parent().prev("div.content").prev();.

來源

2015-10-09 15:51:44 Hashy

@Blaze我只是編輯帖子，解決方案的老闆是哈希;-) –

@哈西 - 我試過你的建議，但沒有奏效。這是我正在使用的HTML。 [code]

Description.....

Navigation content

more...

[code] – Blaze

@Blaze k，然後根據你的代碼你可以把$ contentDesc = $ content.prev（）;這也會起作用 – Hashy

顯示更多jquery與兩個div一起工作

回答

相關問題