Javascript 用无序列表展开DIV

我希望有一个无序的列表，可以过滤掉我的一些工作。我的过滤器工作得非常好（不是在这个例子中），我现在在这个阶段，我有困难的样式。我曾尝试设置div的宽度，并进行一些在线研究，但没有成功

它现在看起来像这样：

我希望最初只显示两个单词（Filter和All），当用户将鼠标悬停或单击单词“Filter”时，列表会随着CSS宽度的变化而扩展，以显示其他类别（Web、静止、运动和游戏）。因此，从这里：

过滤|全部

为此：

---

过滤|网页|静止|运动|游戏

将

ul.过滤

为两个

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'});

});

• 示例：（单击过滤器）

---

如果你把你的

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>​

更新：

以下是带有动画和固定线高错误的最终版本： 另一种不带动画的解决方案：

怎么办：

将过滤器放在单独的嵌套容器中

将其显示设置为“内联”

关于文档就绪隐藏过滤器

单击“切换显示属性”

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

更新：

这是动画版本，改动很少，请检查此处：

---

期待看到Ihor的最终结果-paspar2.com-这里是正在运行的动画，但需要一些时间来确定如何在默认情况下将其隐藏。到目前为止，有几种方法都失败了-它可以工作，但第一次单击时没有动画。完成后将发布更新。我的一个项目也需要这种效果，所以我会让它工作：）@Rob，查看我更新的答案，以获得最后的动画示例。还没有在所有浏览器中测试过它，但可能会起作用。这里有一个直接链接：简单漂亮的Ihor…我真的很感激你在回答我的问题时付出了巨大的努力。您的方法似乎比以前的建议（处理不透明度和溢出问题）提供了更好的转换。您知道一种方法可以使列表在一段时间后折叠（如果它处于非活动状态或未使用）？我在Safari和Modzilla/Firefox中对其进行了测试，在FF中，第一个和最后一个单词上似乎存在嵌套列表问题（文本删除）…解决这个问题的任何想法都让我知道，我会勾选这个答案off@Rob是的，在FF、Safari和Opera中出现了一个线条高度问题，而在Chrome中工作得很好。现在已修复：感谢您的快速响应。感谢您的建议，根据Ihor的回复，我很可能会使用这种方法。我同意，好主意，赞成。不幸的是，仅限于最近的浏览器版本。另一种实现我追求的结果的奇妙方式…谢谢Peter。

#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;}