使用无序列表展开DIV

Expanding a DIV with an Unordered List

本文关键字：DIV 列表 无序      更新时间：2023-09-26

我正在考虑有一个无序的列表来过滤我的一些工作。我的过滤器工作得很好（不是在这个例子中），我现在正处于设计它时遇到困难的阶段。我试着设置div的宽度，并做了一些在线研究，但没有成功。

目前的情况如下：http://jsfiddle.net/XcVHU/

我希望最初只显示两个单词（Filter和All），当用户悬停或单击单词"Filter"时，列表会扩展为CSS宽度转换，以显示其他类别（Web、Still、Motion和Games）。因此，从这个：

筛选|全部

到此：

过滤器|Web|Still|Motion |游戏

最好嵌套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/

更新：

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

另一个没有动画的解决方案：

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

操作：

  1. 将过滤器放入单独的嵌套UL
  2. 将其显示设置为内联
  3. 文档就绪时隐藏筛选器
  4. 单击时切换显示特性

这个解决方案不像@PeterSzymkowski提供的解决方案那样有缺陷，而且看起来比@Duoppixel的解决方案更好（不管怎么说，这个解决方案都很好，如果你喜欢当项目出现在页面右侧并进入位置时的那种动画，它可能仍然适合你）。

更新：

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

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

将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'});
});
  • 示例：http://jsfiddle.net/XcVHU/3/（点击过滤器）
相关文章：