Question

我希望在HTML中使用相同的select功能，但使用div和无序列表。

当页面加载时，按钮的名称应该是具有class =“selected”的元素li。这意味着我必须将selector_button的html更改为在li标签中选择了类的那个。

此外，当用户点击页面的任何部分或从列表中选择其他项目时，如何隐藏无序列表。

我怎样才能实现这一目标？

到目前为止，

JS：

$('#select_button').html();

$('#selector_button').click(function() {
    $('#selector_list').show();
});

HTML：

<div id="selector_button">
    <ul style="display:none;" id="selector_list">
        <li class="option-selected" title="7">Everything</li>
        <li title="1">A</li>
        <li title="4">B</li>
        <li title="9">C</li>
        <li title="8">D</li>
        <li title="22">E</li>
    </ul>
</div>

CSS：

.option-selected
{
    color:#c0c0c0;
}

Answer 1

如果我了解您要将<ul>列表用作html选择框。

看看这个：http://jsfiddle.net/cZ36w/5/

CSS：相同

HTML：从style="display:none;"

中删除<ul>

<强>的jQuery ：

$('#selector_button li').hide();
$('#selector_button li.option-selected').show();


$('#selector_button ul li').hover(function() {
    $('#selector_button ul li').show(); 
});

$('#selector_button ul li').mouseout(function() {
    $('#selector_button li').hide();
    $('#selector_button li.option-selected').show();
});


$('#selector_button ul li').click(function() {
    $('#selector_button ul li').removeClass('option-selected'); 
    $(this).addClass('option-selected'); 
});

它并不完美，但它会为你提供一个实现目标的方向。

Answer 2

你可以使用这个jQuery：

$(function() {
   $("#bdiv").buttonset();
   $(".select").button().click(function() {$("#selector_list").toggle();})

$(".selectarrow").button({text: false,icons: {primary: "ui-icon-triangle-1-s"}
}).click(function() {$("#selector_list").toggle();})

});

请参阅jsFiddle上的演示。

jquery和无序列表

2 个答案: