Question

我想制作像this website这样的东西。当我单击箭头时，左侧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");
})

}）;

当其邻居div向左滑动时，div不会扩展其内容

3 个答案: