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 类，并且下拉列表应再次折叠，第二个选项可见。你知道我的意思！

知道如何解决这个问题吗？用切换（）？

这是一个小提琴，所以你明白我的意思！ http://jsfiddle.net/WFTvq/

Answer 1

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

你能检查一下吗？

Answer 2

有一个好方法可以做到！ ^^ 我几秒钟前才做到的;)

HTML

<div class="styledSelect">
                <span class="styledSelectValue"></span>
                <select name="type">
                    <option value="">Par type de propriété</option>
                    <option value="choix2">choix2</option>
                    <option value="choix3">choix3</option>
                </select>
            </div>

CSS

.styledSelect{/*your css for the background image... it will be the body of your select*/}
.styledSelect select{/*your css with opacity:0;*/}
.styledSelectValue{/*the css of the received value*/}

jQuery

$('.styledSelect').each(function(){
            selectValue = $(this).children("select").val();
            if(selectValue == ""){selectValue = $(this).children("select").children("option:eq(0)").text();}
            $(this).children(".styledSelectValue").text(selectValue);
        });
        $('.styledSelect select').change(function(){
            selectValue = $(this).val();
            if(selectValue == ""){selectValue = $(this).children("option:eq(0)").text();}
            $(this).parent(".styledSelect").children(".styledSelectValue").text(selectValue);
        });

这是我发现的最好的方法;)

Answer 3

尝试

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

Answer 4

使用 CSS 和 jQuery：

CSS：

.select {
    width: 10em;
    margin: 0 auto;
}

li.option {
    width: 100%;
    border: 1px solid #ccc;
    display: none; /* <- hides the li elements of class 'option' */
}

ul:hover li.option {
    display: block; /* <- shows all options on ul:hover */
}

li.option.darr {
    display: block;
}

jQuery：

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

JS Fiddle 演示。