Question

我有一个带按钮的div＆＃34;显示更多＆＃34;。单击“显示更多”按钮时，div的高度将在3种不同的状态下更改。

 <div class="segment-suggetion-content height-small">


    <div class="segment-suggetion-show-more">
       <button type="button" class="btn">Show More</button>
     </div>
</div>

最初我上课。身高 - 身高：200px;当我点击按钮＆＃34;显示更多＆＃34; .height-small将被删除，而.height-mid将添加高度：400px; 再次如果我点击“显示更多”＆＃39; .height-mid将删除并且.height-full将添加。再次单击＆＃39;显示更多＆＃34;，。high-full将更改为.height-small。

我还不擅长jQuery，但我尝试了这个不起作用。我不确定这里出了什么问题。

   $('.segment-suggetion-show-more .btn').click(function(){

    if($(".segment-suggetion-content").hasClass('height-small'))
{
    $(".segment-suggetion-content").removeClass('height-small');
    $(".segment-suggetion-content").addClass('height-md');
}

     if($(".segment-suggetion-content").hasClass('height-md'))
{
$(".segment-suggetion-content").removeClass('height-md');
$(".segment-suggetion-content").addClass('height-full');
}

     if($(".segment-suggetion-content").hasClass('height-full'))
{
$(".segment-suggetion-content").removeClass('height-full');
$(".segment-suggetion-content").addClass('height-small');

}
});

任何帮助将不胜感激。

FIDDLE

Answer 1

此更新的代码有效：

$('.segment-suggetion-show-more .btn').click(function () {

    if ($(".segment-suggetion-content").hasClass('height-small')) {
        $(".segment-suggetion-content").removeClass('height-small');
        $(".segment-suggetion-content").addClass('height-mid');
    }

    else if ($(".segment-suggetion-content").hasClass('height-mid')) {
        $(".segment-suggetion-content").removeClass('height-mid');
        $(".segment-suggetion-content").addClass('height-full');
    }

    else if ($(".segment-suggetion-content").hasClass('height-full')) {
        $(".segment-suggetion-content").removeClass('height-full');
        $(".segment-suggetion-content").addClass('height-small');

    }
});

http://jsfiddle.net/3w5t2kp5/4/

这两个问题是：

您在脚本中写了height-md而不是height-mid
.height-full的高度为自动，为0且没有任何内容

Answer 2

在这里： DEMO

$('.btn').click(function(){

    if($(".segment-suggetion-content").hasClass('height-small'))
    {
        $(".segment-suggetion-content").removeClass('height-small');
        $(".segment-suggetion-content").addClass('height-mid');
    }

    else if($(".segment-suggetion-content").hasClass('height-mid'))
    {
        $(".segment-suggetion-content").removeClass('height-mid');
        $(".segment-suggetion-content").addClass('height-full');
    }

    else if($(".segment-suggetion-content").hasClass('height-full'))
    {
        $(".segment-suggetion-content").removeClass('height-full');
        $(".segment-suggetion-content").addClass('height-small');   
    }
});

问题：

你在CSS中遇到的第一个问题，你已经定义了.segment-suggetion-content.height-full哪个会没问题，除非它没有正确添加。你必须将它们改为.height-full等等！

下一个问题是，在你的CSS中，你已经定义了.mid，但在你的jQuery中调用了.md

在3个不同高度之间切换的问题

2 个答案: