Question

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

这就是我的css代码，而这是我有的方框

<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>

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

Answer 1

例如，您必须将应切换到单独的div的内容换行并切换此div而不是整个#you元素

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


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

https://jsfiddle.net/Qy6Sj/1602/

Answer 2

我不太确定这是不是你想要的。我已将#exitb ID移出#you包装，并将其定位为absolute，以便将其移动到图像中。此外，我简化了代码，只使用了文字+和-，而不是图片图标。

<强> HTML：

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

<强>使用Javascript：

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

<强> CSS：

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

JsFiddle

我该如何制作这样的盒子可以最小化和最大化？

2 个答案: