div变化高度

Question

我在一个面板里有3个div。如何改变每个div的高度？到目前为止，我做的是在一个div上工作，但我需要它在所有三个。这是我的密码：

       function changeheight(_this) {

        var thisText = $(_this).text() ;
        var curHeight = $('.tab-panel div').height();
        $('.tab-panel div').css('height', 'auto');
        var autoHeight = $('.tab-panel div').height();
        $('.tab-panel div').css('height', curHeight + 'px');
        if (thisText == 'Pročitaj više') {

            $('#tab-1,.tab-panel div').animate({
                'height': autoHeight + "px"
            }, 600);
            $(_this).text((thisText  == 'Sakri sadržaj') ? 'Pročitaj više' : 'Sakri sadržaj');
            $(_this).prepend('<img id="theImg" src="Slicice/open.png" />');
        }
        else if (thisText  == 'Sakri sadržaj') {

            $('#tab-1,.tab-panel div').animate({
                'height': '276px'
            }, 600);

            $(_this).text((thisText  == 'Sakri sadržaj') ? 'Pročitaj više' : 'Sakri sadržaj');
            $(_this).prepend('<img id="theImg" src="Slicice/close.png" />');
        }
        return false;
    };

还有html。在我的例子中，id tad-1和tab-2的Divs已经溢出，但是我并没有把所有的文本都放在这个html中。我要让这三个人都能用上：

                <div id="tab-1" class="tab-panel active" >
                    <div >
                        LETO 2015: ALNJA<br><br>
                        Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
                        odlikuju veoma izraženi kontrasti. Duge peščane plaže i hladne planinske reke, 
                        drevne ruševine iz rimskog doba i moderni hoteli, Orijent i Evropa na jednom mestu. 
                    <div class="margin-top16px">*Kompletan cenovnik za sve hotele u ponudiagencije pogledajte klikom na:<a href="#">Hellena travel - Alanja leto 2015.</a></div>
                    </div>

                            <a href="javascript:void(0);" onclick="return changeheight(this);" class="morelink"><img src="Slicice/close.png" id="close">Pročitaj više</a>

                    </div>
                    <div id="tab-2" class="tab-panel" >
                        <div>Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
                        </div>
                            <a href="javascript:void(0);" onclick="return changeheight(this);" class="morelink"><img src="Slicice/close.png">Pročitaj više</a>
                    </div>
                    <div id="tab-3" class="tab-panel" >
                        <div>Alanja - grad sa mnogo različitih lica. Ovaj grad, smešten u istočnom delu turske obale, 
                    </div>

                            <a href="javascript:void(0);" onclick="return changeheight(this);" class="morelink"><img src="Slicice/close.png">Pročitaj više</a>
                    </div>
               </div>

Answer 1

问题在onclick="return changeheight(this);"中，在本例中，您使用参数中的链接运行函数。尝试删除onclick事件并使用以下代码：

    $('.tab-panel a.morelink').on('click',function () {
        var thisText = $(this).text(),
            curDiv = $(this).closest('.tab-panel').find('div');
            curHeight = curDiv.height();
        curDiv.css('height', 'auto');
        var autoHeight = curDiv.height();
        curDiv.css('height', curHeight + 'px');
        console.log(curHeight, autoHeight)
        if (thisText == 'Pročitaj više') {

            curDiv.parent('.tab-panel').andSelf().animate({
                'height': autoHeight + "px"
            }, 600);
            $(this).text((thisText  == 'Sakri sadržaj') ? 'Pročitaj više' : 'Sakri sadržaj');
            $(this).prepend('<img id="theImg" src="Slicice/open.png" />');
        }
        else if (thisText  == 'Sakri sadržaj') {

            curDiv.parent('.tab-panel').andSelf().animate({
                'height': '276px'
            }, 600);

            $(this).text((thisText  == 'Sakri sadržaj') ? 'Pročitaj više' : 'Sakri sadržaj');
            $(this).prepend('<img id="theImg" src="Slicice/close.png" />');
        }
        return false;
    });