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

Answer 2

您可以使用“：first”选择器，然后从该对象中删除该类，然后再次调用。或者，如果您不想删除类，请添加一个类并使用“：first”和“：not”选择器

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

2 个答案: