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项目设置为display：block。当我点击第一个时，应显示所有选项。

到目前为止一直很好......

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

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

知道如何解决这个问题吗？使用toggle（）？

这是一个小提琴，所以你明白我的意思！ 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 demo

jquery：自定义选择框？

4 个答案: