jquery：自定义选择框？

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

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

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

你知道怎么解决吗？使用toggle（）

这是一把小提琴，你明白我的意思了吧

试试看

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

使用CSS和jQuery：

CSS:

---

你能检查一下吗？

有个好办法我几秒钟前刚到；）

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>

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

---

这是我找到的最好的方法；）

是的，这适用于类，但如何在单击时隐藏所有其他选项。它应该切换。如果只有一个选项可见，并且我单击了，则应显示所有选项。当我现在点击另一个选项时，下拉列表应该会再次折叠，只有选中的选项才可见。谢谢。如果未选择任何内容，是否有可能折叠选择框？如果在显示所有选项后单击选择框-当我没有选择其中一个选项并单击屏幕其余部分的任何位置时，选择框不会自动折叠。任何实施这种行为的机会。

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

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

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

.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*/}

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