Question

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

我所希望的是最初只显示两个单词（过滤器和全部），当用户将鼠标悬停在单击“过滤器”上时，列表会以CSS宽度过渡扩展以显示其他类别（网络，静止，动作和游戏）。所以，从这个：

过滤|所有 的

到此：

过滤|网络|还是|动作|游戏 的

Answer 1

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

Answer 2

更新：

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

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

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

怎么做：

将过滤器放在单独的嵌套UL
将其显示设置为内联。
关于文档就绪隐藏过滤器
点击切换显示属性。

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

更新：

这是动画版本，进行了一些更改，请点击此处：

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

Answer 3

将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/（点击过滤器）

使用无序列表扩展DIV

3 个答案:

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