怎么实现3个div，点其中一个会增高，再点其他的之前增高的会收回去，点的那个增高？

div 增高 伸展

解决方案 »

  1.   

    设置div的overflow为hidden
    按钮用js改变div的height试试
      

  2.   

    siblings()例如：
    <script language="javascript">
    $(function(){
    $('div#title_list ul li').hover(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
    $('div#title_list ul li').index(this);
     $("div#content>div").eq($('div#title_list ul li').index(this)).show()
    .siblings().hide();
    });
    });
    </script>
      

  3.   

    siblings() 查询同胞元素，例如：$("div").siblings(".now"),查询所有class为now的div，设置为什么什么样式或者隐藏。这类展开与隐藏或者滑动门的东东，用siblings来做最为方便。不需要循环。
      

  4.   


    <html>
    <head>
        <style type="text/css">
            .container
            {
                border-right:1px solid;
                border-left:1px solid;
                border-bottom:1px solid;
            }
            .panel
            {
                height:30px;
                overflow:hidden;
            }
            .panel_active
            {
                height:300px;
            }
            .panel .title
            {
                border-top:1px solid;
                border-bottom:1px solid;
                background-color:blue;
                height:30px;
                margin:0;
                padding:0;
                cursor:pointer;
            }
            .panel_active .title
            {
                cursor:inherit;
            }
        </style>
        <script type="text/javascript" src="jquery.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="panel panel_active">
                <h4 class="title">panel 1</h4>
                <div>first panel</div>
            </div>
            <div class="panel">
                <h4 class="title">panel 2</h4>
                <img src="" />
            </div>
            <div class="panel">
                <h4 class="title">panel 3</h4>
            </div>
            <div class="panel">
                <h4 class="title">panel 4</h4>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $(".container .title").click(function () {
                    if ($(this).parent().hasClass("panel_active")) return;
                    $(".panel_active").animate({ height: "30px" }).removeClass("panel_active")
                    $(this).parent().animate({ height: "300px" }).addClass("panel_active");
                });
            });
        </script>
    </body>
    </html>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(".dv").click(function () {
                    $(".dv").removeClass("cur");
                    $(this).addClass("cur");
                });
            });
        </script>
        <style type="text/css">
        .dv{width:40px;height:40px;padding:0 10px;display:inline-block;*display:inline;*zoom:1;background:red;}
        .cur{height:60px!important;}
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="dv">dv1</div>
        <div class="dv">dv2</div>
        <div class="dv">dv3</div>
        </form>
    </body>
    </html>