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

Question

我有这个解决方案,我试图使用,但它使用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;
        });
    }
});

或者在这里看一个现场演示