Question

我在面板中有3个div。我怎样才能改变每个div的高度？到目前为止，我认为它适用于一个div，但我需要它在所有3个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的div溢出，但我没有将所有文本放在这个html中。我需要为所有3个人工作：

                <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;
    });

改变div的高度

1 个答案: