Javascript 我如何使这个盒子最小化和最大化？

这是我的css代码，这是我的盒子

#you {
    background-color: rgba(65,64,61,0.5);
    position: absolute;
    top: 0px;
    right: 200px;
    padding: 7px;
    border-radius: 0px 0px 3px 3px;
    width: 165px;
    border: 2px solid #41403d;
 }
 #exitb { 
    background: url(http://playneko.co.uk/exit.png);
    height: 19px;
    width: 19px;
    border-radius: 3px;
}
#exitb:hover {
    background: url(http://playneko.co.uk/exit_hover.png);
}

---

如何将退出图像添加到方框右侧，以使方框最小化和最大化？如果您能提供帮助，我们将不胜感激。

例如，您必须将一个内容包装成一个单独的div，并切换该div而不是整个you元素

---

我不太确定这是否是你想要的。我已经将exitb id从you包装器中移出，并将其定位为绝对，以便将其移动到图像中。此外，我将代码简化了一点，只使用了文本+和-，而不是图像图标

HTML:

CSS:

---

.

你能把输出的HTML而不是PHP发布给我们吗？确切的问题是什么？你自己试过什么吗？你能做一个JSFIDLE吗？Marc你说的html输出是什么意思，我试着在JSFIDLE上编辑一个，但它只是完全去掉了框。你想使用更像jQuery动画功能的JSFIDLE。。这样可以将div的高度设置为按钮的高度。。如果你想让它移到页面底部，它不会消失。。那么这本身就是另一个概念。。您可以使用绝对位置，但使用jquery查找页面底部并对其进行偏移。我有这样的设置，但我在哪里添加javascript，因为我的代码目前看起来就是这样的。请自己试一试，然后问一个你将面临的具体问题。

<div id="you">
    <div style="height: 110px; width: 57px; float: left; overflow: hidden;">
        <img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left">
    </div>
    <div style="position: absolute; z-index:1">'.$aanwezag.'</div>
    <br/>
    </td>
    <div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
    <div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
    <div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
    <div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
    <div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
    <div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>

<div id="you">
    <div id="exitb">-</div>
    <div id=content>
        ...
    </div>
</div>


$("#content").slideToggle();

<div id="exitb">-</div>
<div id="you">
    ...
</div> 

$("#exitb").click(function () {
    if ($(this).html() == "-") {
        $(this).html("+");
    } else {
        $(this).html("-");
    }
    $("#you").slideToggle();
});

#exitb {
    text-align: center;
    color: #fff;
    background-color: red;
    height:19px;
    width:19px;
    border-radius:3px;
    cursor: point;
    position:absolute;
    top:0px;
    right:200px;
    z-index: 10;
    cursor: pointer;
}