3

我正在寻找一个无序列表来过滤我的一些工作。我的过滤器工作得非常好（在这个例子中没有），我现在正处于难以对其进行造型的阶段。我尝试设置 div 的宽度并进行一些在线研究，但没有成功。

它目前看起来像这样：http: //jsfiddle.net/XcVHU/

我希望最初只显示两个词（过滤器和全部），当用户将鼠标悬停在或单击“过滤器”一词时，列表会扩展为 CSS 宽度转换以显示其他类别（Web、仍然，运动和游戏）。所以，从这里：

过滤器 | 全部

对此：

过滤器 | 网站 | 仍然 | 运动 | 游戏

4

3 回答 3

6

如果你嵌套你ul的，例如......

<div id="portfolionav">
    <ul class="filter">
        <li>Filter</li>
        <ul class="subfilters">
           <li class="web"><a href="#">Web</a></li>
           <li class="still"><a href="#">Still</a></li>
           <li class="motion"><a href="#">Motion</a></li>
           <li class="games"><a href="#">Games</a></li>
        </ul>
        <li class="current all"><a href="#">All</a></li>
    </ul>    
</div>​

过渡的 CSS 更改非常简单：

#portfolionav ul {
    display: inline-block;
    white-space: nowrap;
   -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;

}
#portfolionav ul ul {width: 0; opacity: 0;}

#portfolionav ul:hover > ul {width: 370px; opacity: 1;}

http://jsfiddle.net/jukUm/

于 2012-08-26T11:06:38.957 回答
3

更新：

这是带有动画和固定行高错误的最终版本：http: //jsfiddle.net/XcVHU/9/

另一种解决方案，没有动画：

http://jsfiddle.net/XcVHU/4/

该怎么办：

  1. 将过滤器放在单独的嵌套 UL 中
  2. 将其显示设置为内联。
  3. 在准备好文档时隐藏过滤器
  4. 单击时切换显示属性。

该解决方案不像@PeterSzymkowski 提供的那样有问题，并且看起来比@Duopixel 的解决方案更好（无论如何，如果您更喜欢那种动画，当项目出现在页面右侧并运行时，它可能仍然适合您进入位置）。

更新：

这是动画版本，做了一些改动，请查看：

http://jsfiddle.net/XcVHU/7/

于 2012-08-26T11:55:31.960 回答
2

分成ul.filter两个ul并使用一些代码：

$('#expand').click(function(e){
    e.preventDefault();
    $('.filter.hidden').show();
    var tw = $('.filter.hidden').width();
    $('.filter.hidden').css('width', '0px');
    $('.filter.hidden').animate({width: tw+'px'});

});
于 2012-08-26T11:03:44.333 回答