Question

我正在艰难时间使用图片制作垂直菜单。

5张图片，我希望以“折叠”模式显示所有图片，点击后，点击的图片会展开，其他折叠会为其腾出空间。

我快到了：http://jsbin.com/eyepam/2/

但我无法让它完美地运作：

菜单从不展开到完整的可用宽度（右侧总是有一个白色边距）
动画在重置尺寸时不够平滑，我很想让动画比它更平滑（它看起来像先放下所有，然后展开点击的动画，这个想法是扩大点击的一个并折叠所有其他...顺利）

任何对CSS有更好了解的人都可以帮助我实现目标吗？

Answer 1

Check out my solution here

jQuery代码：

var winWidth = $(window).width(),
    activeWidth = winWidth / 2,
    nonActiveWidth = (winWidth - activeWidth) / 4 ;

$(function () {
  $("ul li")
    .height($(window).height())
    .click(function () {

      $(this) // expand active one
        .animate({ width: activeWidth , queue: false});
      $("ul li") // collapse others
        .not(':eq('+$(this).index()+')')
        .animate({ width: nonActiveWidth , queue: false});
    });

});

我将宽度调整移到了CSS：

重要的部分，使用box-sizing:border-box使边框显示为'内边框'，因此它不会干扰我们对<li>宽度的计算。

.container ul li {
  overflow: hidden;
  width: 20%;
  display: inline-block;
  float: left;
  border-left: 4px solid #000;
  height: 768px;
  -moz-box-sizing:    border-box;
  -webkit-box-sizing: border-box;
  box-sizing:         border-box;   
}

制作垂直图像菜单

1 个答案: