夥計基本上會有一個引導容器div
,裏面會有4個卡片樣式div
s切換展開/收縮按鈕。當你點擊一張卡片的按鈕時,div將一直展開到容器的寬度。請檢查圖像。我是jQuery的新手,並與我的腳本,我無法實現完整的寬度。如果有人能幫助我,那會很棒。下面的代碼如下 -jQuery切換展開divs裏面的引導容器包裝
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>
[對我的作品(http://jsfiddle.net/7vmckqzk/)你確定寬度真的是'600' – adeneo 2015-04-06 10:39:29
@ adeneo - 我只是給了600只是爲了檢查切換寬度工作。我希望div一直擴展到容器。 – 2015-04-06 10:47:16
@adeneo - 請檢查附件圖像。 – 2015-04-06 11:20:43