Question

我做了一个简单的登陆页面，你有四个div，每个占用25％的屏幕宽度。单击其中一个时，所有其他变小，所单击的变宽。虽然它不顺畅，但效果很好。

接下来，当关闭所有面板时，它们应该回到25％的宽度。

由于javascript不是我的一杯茶，我想对此有一些建议。

我认为代码效率不高，所以如果有人想出一个更好的解决方案，那就没问题。

足够的谈话，这里有一个当前工作状态的代码：https://codepen.io/MaartenTe/pen/JKYzMx

＆＃13;

$("#one").click(function() {
  $(".content-1").animate({
    width: 'toggle'
  }, 500);
  $(".content-2").hide(500);
  $(".content-3").hide(500);
  $(".content-4").hide(500);
  $("#one").animate({
    width: '5%'
  });
  $("#two").animate({
    width: '5%'
  });
  $("#three").animate({
    width: '5%'
  });
  $("#four").animate({
    width: '5%'
  });
})

$("#two").click(function() {
  $(".content-2").animate({
    width: 'toggle'
  }, 500);
  $(".content-1").hide(350);
  $(".content-3").hide(350);
  $(".content-4").hide(350);
})

$("#three").click(function() {
  $(".content-3").animate({
    width: 'toggle'
  }, 500);
  $(".content-1").hide(350);
  $(".content-2").hide(350);
  $(".content-4").hide(350);
})

$("#four").click(function() {
  $(".content-4").animate({
    width: 'toggle'
  }, 500);
  $(".content-1").hide(350);
  $(".content-3").hide(350);
  $(".content-2").hide(350);
})

＆＃13;

body {
  padding: 0;
  margin: 0;
  background-color: #000;
}
.container-fluid {
  display: flex;
  height: 650px;
}
.container-fluid div {
  width: 25%;
  text-align: center;
  height: 100%;
  min-height: 100%;
  color: white;
}
div[class^="content-"] {
  width: 100%;
  color: black;
  background-color: orange;
}
.content-1,
.content-2,
.content-3,
.content-4 {
  display: none;
}
#one {
  background-color: black;
}
#two {
  background-color: blue;
}
#three {
  background-color: red;
}
#four {
  background-color: green;
}
.content-1 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.content-2 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider2-copy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.content-3 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider-3.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.content-4 {
  background: url(http://phpscript.be/caipi/wp-content/uploads/2016/06/slider1-copy.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div id="one" class="toggle">
    1

  </div>
  <div class="content-1 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
  <div id="two" class="toggle">
    2
  </div>
  <div class="content-2 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
  <div id="three" class="toggle">
    3
  </div>
  <div class="content-3 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
  <div id="four" class="toggle">
    4
  </div>
  <div class="content-4 color">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a vestibulum sapien. Curabitur rhoncus tortor urna. Duis a interdum lorem. Aenean mollis, tortor at blandit elementum, justo ligula malesuada ante, id blandit enim metus vel nisl. Maecenas
    et vulputate mi. Sed quis eros sit amet ipsum consectetur tincidunt. Vivamus suscipit laoreet justo, a suscipit nunc ultricies nec. Fusce sollicitudin, mauris eu sollicitudin rhoncus, augue augue tristique nisl, sed lacinia velit magna sed neque.
    Aliquam fermentum faucibus nulla a convallis. Integer cursus felis id ultricies semper. Cras eget euismod enim. Morbi rhoncus ante et malesuada hendrerit. Vestibulum euismod euismod tortor dapibus aliquet. Maecenas justo lorem, cursus eu metus id,
    tincidunt cursus diam.


  </div>
</div>

＆＃13;

Answer 1

回应DBS' comment，这里利用CSS transition属性更有意义。我不确定jQuery本身是否支持类似于slideDown()的缩小元素的内容＆＃39;宽度。你可以做的最好的事情就是使用jQuery在指定的元素上切换这个CSS属性，这在这里会有点过分。

我已经制作了一个JSFiddle，你可以看看here。基本上，当用户点击＆＃34;内容切换器＆＃34;时，它会通过将宽度设置为5%来缩小所有切换器，使用.next()查找单击切换器的下一个切换器，并将其宽度设置为80%。

内容及其内容转换器都利用记录为here的CSS过渡属性。

Answer 2

编辑过的css：改变宽度

div[class^="content-"] {
  width: 0%;
  color: black;
  background-color: orange;
}

除去

.content-1,
.content-2,
.content-3,
.content-4 {
  display: none;
}

并对代码进行了一些更改，以使其更简单 fiddle

jQuery以平滑的方式切换div

2 个答案: