jQuery div内容部分隐藏，全部显示

Question

我有this solution我正在尝试使用，但它使用 ID。我希望同一页面上的多个 div 使用相同的类。我更改了对类的 ID 引用，但无法让它们彼此独立地触发。它们同时开火。我怎样才能让他们独立开火。我想通过将函数包装在 .each() 中来修复它，但它似乎仍然会触发我的所有 div 同时打开。

任何建议都非常有帮助。谢谢。

$(function(){

var slideHeight = 75; // px
var defHeight = $('.wrap').height();
    if(defHeight >= slideHeight){
        $('.wrap').css('height' , slideHeight + 'px');
        $('.read-more').append('<a href="#">Click to Read More</a>');
        $('.read-more a').click(function(){
            var curHeight = $('.wrap').height();
            if(curHeight == slideHeight){
                $('.wrap').animate({
                  height: defHeight
                }, "normal");
                $('.read-more a').html('Close');
                $('.gradient').fadeOut();
            }else{
                $('.wrap').animate({
                  height: slideHeight
                }, "normal");
                $('.read-more a').html('Click to Read More');
                $('.gradient').fadeIn();
            }
            return false;
        });
    }// end if

});

我的 HTML

<div class="container">

<h1>jQuery slide with minimum height</h1>

<h2>About Billabong</h2>

<div class="wrap">

    <div>

        <p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>

        <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>

        <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>

        <p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>

    </div>

    <div class="gradient"></div>

</div>

<div class="read-more"></div>

<div class="container">

<h1>jQuery slide with minimum height Content 2</h1>

<h2>About Billabong</h2>

<div class="wrap">

    <div>

        <p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>

        <p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>

        <p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>

        <p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>

    </div>

    <div class="gradient"></div>

</div>
<div class="read-more"></div>

</div>

Answer 1

使用所有类并用它替换您的代码。我希望它的工作原理是不言自明的。

var slideHeight = 75;
$(".container").each(function() {
    var $this = $(this);
    var $wrap = $this.children(".wrap");
    var defHeight = $wrap.height();
    if (defHeight >= slideHeight) {
        var $readMore = $this.find(".read-more");
        $wrap.css("height", slideHeight + "px");
        $readMore.append("<a href='#'>Click to Read More</a>");
        $readMore.children("a").bind("click", function(event) {
            var curHeight = $wrap.height();
            if (curHeight == slideHeight) {
                $wrap.animate({
                    height: defHeight
                }, "normal");
                $(this).text("Close");
                $wrap.children(".gradient").fadeOut();
            } else {
                $wrap.animate({
                    height: slideHeight
                }, "normal");
                $(this).text("Click to Read More");
                $wrap.children(".gradient").fadeIn();
            }
            return false;
        });
    }
});

Or see a live demo here