4

私はこのコードを見つけました：リンク

$(".show-more a").on("click", function() {
var $this = $(this); 
var $content = $this.parent().prev("div.content");
var linkText = $this.text().toUpperCase();    

if(linkText === "SHOW MORE"){
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
} else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
};

$this.text(linkText);
});​

CSS：

    div.text-container {
    margin: 0 auto;
    width: 75%;    
}

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

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}

h1 {
    font-size: 24px;        
}
p {
    padding: 10px 0;
}
.show-more {
    padding: 10px 0;
    text-align: center;
}

</ p>

まさに私が探していたものでしたが、ここでわかるように、変更すると（リンク）、1行か2行しかない場合は「もっと見る」リンクがあり、その場合は必要ありません。ご回答ありがとうございます！

4

4 に答える 4

6

サンプル コードが完全に機能していなかったので、少し前の投稿で作成した独自のサンプルの 1 つを拡張することにしました。

デモ- 必要のない場合はリンクを表示/非表示にして、リンクを非表示にします

デモでは、最初のテキストにはリンクがなく、2 番目のテキストにはリンクがあることが示されています。最初のテキストにさらに数文字追加すると、フィドルを再度実行したときにリンクが表示されます。

アイデアは、クライアントと実際の高さを再確認し、リンクを表示するかどうかを決定することです。以下と同様です。

$(".show-more a").each(function() {
    var $link = $(this);
    var $content = $link.parent().prev("div.text-content");

    console.log($link);

    var visibleHeight = $content[0].clientHeight;
    var actualHide = $content[0].scrollHeight - 1; // -1 is needed in this example or you get a 1-line offset.

    console.log(actualHide);
    console.log(visibleHeight);

    if (actualHide > visibleHeight) {
        $link.show();
    } else {
        $link.hide();
    }
});

デモでは次の HTML を使用しています。

<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
        labore Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
    </div>
<div class="text-container">
    <h1>Lorem ipsum dolor</h1>
    <div class="text-content short-text">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    </div>
    <div class="show-more">
        <a href="#">Show more</a>
    </div>
</div>​

および次の基本的な CSS:

div.text-container {
    margin: 0 auto;
    width: 75%;    
}

.text-content{
    line-height: 1em;
}

.short-text {
    overflow: hidden;
    height: 2em;
}

.full-text{
    height: auto;
}

h1 {
    font-size: 24px;        
}

.show-more {
    padding: 10px 0;
    text-align: center;
}

</p>

于 2012-11-25T22:04:05.133 に答える
1 
    if( $('.text-container').html().indexOf("<br") >= 0 ) {
        $(".show-more").hide()
    }
于 2012-11-25T22:21:33.317 に答える
1

あなたの本当の質問が何であるかはわかりませんが、テキストが 1 行または 2 行しかない場合は [もっと見る] リンクを無効にし、テキストが 2 行を超える場合は有効にすることをお勧めします。

この目的のために、テキストを含む div がしきい値 (2 行) よりも大きいかどうかを確認する必要があります。私のソリューションでは、ピクセル単位で高さを与えるheight()関数を使用します。元の例では、高さが2emを超える場合、リンク テキストは表示されません。そのためにピクセルも使用するか、ツールを使用して単位を変換することをお勧めします。

しきい値が 1 行のソリューションの追加行は次のとおりです。

var text = $('.text-container');
if (text.height() <= 20) {
    $('.show-more').hide();
}

http://jsfiddle.net/JRDzf/

于 2012-11-25T21:56:51.973 に答える
1

ここで動作するフィドルを参照してください - http://jsfiddle.net/tariqulazam/hpeyH/

まず、コンテンツがオーバーフローしているかどうかを測定する必要があります。jquery を使用して要素のオーバーフローを検出するのソリューションを使用しました。

最後に、このプラグインを使用して、「もっと見る」リンクを表示するか非表示にするかを決定します。

$("div.content").HasScrollBar() ==true ? $(".show-more").show():$(".show-more").hide();
于 2012-11-25T21:55:37.863 に答える