在折叠按钮上更改每个div上的CSS样式

Question

我想知道如何更改按下折叠按钮或子div折叠时的样式宽度。

CSS

.wrap-menu {  overflow:hidden; display:block; width:310px;}

这是风格。如果没有折叠，我希望折叠后的width:0px;更改为width:310px;

这是我的代码：

<a href="#" class="collapsed" data-toggle="collapse" data-target="#sub-menu-invest">
<div class="wrap-menu">
<div class="menu-left"><span class="icon"></span></div>
<div class="collapse width right-collapse">
<div class="menu-right">Section<span class="panel-heading pull-right"></span></div>                     
</div>
</div>
</a>

<div id="sub-menu-invest" class="collapse">
<a href="#">
<div class="wrap-menu">
<div class="menu-left menu-dropdown background-inside"><svg></svg></div>
<div class="collapse width right-collapse">
<div class="menu-right menu-dropdown background-inside">Section Inside</div>
</div>
</div>
</a>

因此，当DIV id="sub-menu-invest"折叠时，如果没有折叠以更改为width:0px;

，则wrap-menu的宽度为310px

现场示例可以在这里看到：http://www.emocool.com/test/menu/index.html