jquery:自定义选择框？

Question

嘿伙计们，我正在尝试自己做一个相当简单的选择框。

<div class="select">
    <ul>
        <li class="option darr">Dropdown one</li>
        <li class="option">Dropdown two</li>
        <li class="option">Dropdown three</li>
    <ul>
</div>

加载页面时，仅第一个 li-item 设置为 display:block。当我单击第一个时，应显示所有选项。

到目前为止一切顺利...

/*select box*/
$('.select ul li.option').click(function() {
    $('.select ul li.option').fadeIn('fast');
});

但是现在我被困住了。当我点击例如在第二个选项上，该选项应应用 .darr 类，并且下拉列表应再次折叠，第二个选项可见。你知道我的意思!

知道如何解决这个问题吗？使用切换()？

这是一个 fiddle ，所以你明白我的意思! http://jsfiddle.net/WFTvq/

Answer 1

$('.select ul li.option').click(function() {
        $(this).siblings().toggle().removeClass('darr');
        $(this).addClass('darr');
    });

你能检查一下吗？