dongxian7194
2014-08-07 11:38 阅读 71

将div高度切换为自动(100%)并返回到已定义的?

I'm building movie review site using WordPress, I'm not so good with jquery or javascript, with php I can "fight". I would need some help from you guys. This is first question I actually couldn't find answer on stackoverflow, and I need it badly.

I have this code:

<div class="movie_cast">
<span class="movie_cast_bold">Cast: </span>John Hurt, Peter Mullan, Ingrid Bolsø Berdal, Ian Whyte, Robert Whitelock
</div>

My css is:

.movie_cast {
float: right;
width: 35%;
margin-left: 2%;
line-height: 15px;
font-family: 'Lucida Grande',Arial,Helvetica,Verdana,sans-serif;
font-size: 12px;
height: 20px;
overflow: hidden;
}

Whats some simple jquery with button that I can toggle my cast from height: 20px to full height height: auto, and also return after clicked back. With height of 20px it should show "more", and with full or auto height it would show "less" and return to height of 20 px.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

  • 已采纳
    duanjing7459 duanjing7459 2014-08-07 11:46

    You can try this :

    $(function(){
        $('input[type="button"]').click(function(){
           var cssht = $('.movie_cast').height();
           if(cssht=='20')
               $('.movie_cast').height('auto');
            else
                $('.movie_cast').height('20px');
        });
    });
    

    Demo

    点赞 评论 复制链接分享

相关推荐