div當其鄰居div向左滑動時不擴展其內容

Question

我想製作類似this website的東西。 當我點擊箭頭時，左邊的div摺疊，右邊的div展開。 問題是，正確的div的內容不擴大！

這裏是我的html：

<div class="tools-bg"> 
    <div class="tools"> 
    </div> 
</div> 
<div class="arrow"></div> 
    <div class="picture-holder"> 
     <div class="allpartsofthepic"> 
     <div id="row1" class="tr"> 
     <div id="prt1" class="td"></div>   
     <div id="prt2" class="td"></div> 
     <div id="prt3" class="td"></div> 
     <div id="prt4" class="td"></div> 
     <div id="prt5" class="td"></div> 
     <div id="prt6" class="td"></div>    
     <div id="prt7" class="td"></div>   
     <div id="prt8" class="td"></div> 
     <div id="prt9" class="td"></div> 
     <div id="prt10" class="td"></div> 
     </div> 
     </div> 
    </div> 

這裏是我的CSS：

.tools-bg 
{ 
    background: none repeat scroll 0 0 #ededed; 
    float: left; 
    height: 450px; 
    width: 350px; 
} 
.tools 
{ 
    margin: 40px; 
} 
.arrow 
{ 
    background-color: #ccc; 
    color: #666; 
    font-size: 2em; 
    height: 450px; 
    float:left; 
    padding-top: 167px; 
    text-align: center; 
    width: 50px; 
    cursor:pointer; 
} 
.tr 
{ 
    display:block; 
} 
.td 
{ 
    width:278px; 
    height:265px; 
    float:left; 
} 
.picture-holder 
{ 
    float: left; 
    overflow: hidden; 
    height:450px; 
    width:70%; 
} 
#prt1{ background-image:url("../image/01_01_01.png");} 
#prt2{ background-image:url("../image/01_01_02.png");} 
#prt3{ background-image:url("../image/01_01_03.png");} 
#prt4{ background-image:url("../image/01_02_01.png");} 
#prt5{ background-image:url("../image/01_02_02.png");} 
#prt6{ background-image:url("../image/01_02_03.png");} 
#prt7{ background-image:url("../image/01_03_01.png");} 
#prt8{ background-image:url("../image/01_03_02.png");} 
#prt9{ background-image:url("../image/01_03_03.png");} 
#prt10{ background-image:url("../image/01_04_01.png");} 

我認爲這個問題是在我的CSS，但我解決不了。請幫幫我。

Answer 1

通過簡單地從整個容器中減去箭頭寬度，就可以在運行滑動動畫之前計算圖片的持有者寬度。

然後，您將能夠使用CSS3翻譯爲它們設置動畫。

$(function(){ 
 
    var totalWidth = $(document).width(); 
 
    var arrowWidth = $('.arrow').width(); 
 
    var holderWidth = totalWidth - arrowWidth; 
 
    $('.picture-holder').width(holderWidth); 
 
    $('.arrow').on('click', function(){ 
 
    $('body').toggleClass('slide-left'); 
 
    }); 
 
});

body{ 
 
    margin: 0; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
.tools-bg 
 
{ 
 
    background: none repeat scroll 0 0 #ededed; 
 
    float: left; 
 
    height: 450px; 
 
    width: 350px; 
 
} 
 
.tools 
 
{ 
 
    margin: 40px; 
 
} 
 
.arrow 
 
{ 
 
    background-color: #ccc; 
 
    color: #666; 
 
    font-size: 2em; 
 
    height: 450px; 
 
    float:left; 
 
    padding-top: 167px; 
 
    text-align: center; 
 
    width: 50px; 
 
    cursor:pointer; 
 
    -webkit-box-sizing: border-box; 
 
} 
 
.tr 
 
{ 
 
    display:block; 
 
} 
 
.td 
 
{ 
 
    width:278px; 
 
    height:265px; 
 
    float:left; 
 
} 
 
.picture-holder 
 
{ 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 0; 
 
    overflow: hidden; 
 
    height:450px; 
 
    width: 70%; 
 
    background: cyan; 
 
    -webkit-transform: translate(350px, 0); 
 
} 
 

 
.slide-left .arrow, 
 
.slide-left .tools-bg{ 
 
    -webkit-transform: translate(-350px, 0); 
 
} 
 

 
.slide-left .picture-holder{ 
 
    -webkit-transform: translate(0); 
 
} 
 

 
.tools-bg, 
 
.arrow, 
 
.picture-holder{ 
 
    -webkit-transition: all .3s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tools-bg"> 
 
    <div class="tools"> 
 
    </div> 
 
</div> 
 
<div class="arrow"></div> 
 
    <div class="picture-holder"> 
 
    <div class="allpartsofthepic"> 
 
    <div id="row1" class="tr"> 
 
     <div id="prt1" class="td"></div>   
 
     <div id="prt2" class="td"></div> 
 
     <div id="prt3" class="td"></div> 
 
     <div id="prt4" class="td"></div> 
 
     <div id="prt5" class="td"></div> 
 
     <div id="prt6" class="td"></div>    
 
     <div id="prt7" class="td"></div>   
 
     <div id="prt8" class="td"></div> 
 
     <div id="prt9" class="td"></div> 
 
     <div id="prt10" class="td"></div> 
 
    </div> 
 
</div>

Answer 2

更改你的HTML這樣

<div class="tools-bg" id="leftSideBar"> 
    <div class="tools"> 
    </div> 
</div> 
<div class="arrow" onclick="collapse()"></div> 
    <div class="picture-holder"> 
    <div class="allpartsofthepic"> 
    <div id="row1" class="tr"> 
     <div id="prt1" class="td"></div>   
     <div id="prt2" class="td"></div> 
     <div id="prt3" class="td"></div> 
     <div id="prt4" class="td"></div> 
     <div id="prt5" class="td"></div> 
     <div id="prt6" class="td"></div>    
     <div id="prt7" class="td"></div>   
     <div id="prt8" class="td"></div> 
     <div id="prt9" class="td"></div> 
     <div id="prt10" class="td"></div> 
    </div> 
</div> 

並添加此javascript

<script> 
check = 1; 
function collapse(){ 
    if(check == 1){ 
     check = 0 ; 
     document.getElementById("leftSideBar").style.display = "none"; 
    } 
    else { 
     check = 1; 
     document.getElementById("leftSideBar").style.display = "block"; 
    } 
} 
</script> 

Answer 3

也許我可以幫你

Fiddle here

$(document).ready(function(){ 
$('.arrow').click(function(){ 
    $('.left').toggle("slide"); 
}) 

}）;