Question

我想创建以下内容但不确定最佳方法是什么。

我想要一个网页上的垂直项目列表。每个项目都是可点击的。当用户单击一个列表项时，我想显示它已被选中（通过在后台显示按钮图像。当再次单击相同的项目或单击任何其他列表项时，我想删除该图像，如果单击了另一个项目，选择图像显示在该项目后面。

有什么建议吗？

由于

Answer 1

// catch a click on any of the <li> items
$('li').click(function(){
    // store a reference to the specific <li> that
    // was clicked.
    var $li = $(this);

    // toggle the class (if it's applied, it's removed.
    // if it's removed, re-apply it)
    $li.toggleClass('clicked');

    // Now, if it's applied, remove the class from any
    // other <li> (single item clicked at a time)
    if ($li.hasClass('clicked')){
        $li.siblings().removeClass('clicked');
    }
});

Answer 2

这在jQuery中特别令人愉快。小提琴：http://jsfiddle.net/HgVmm/3/

HTML：

<ul id='items' class='selectable'>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

JS：

// For a single list to act independent of other lists:
$('ul.selectable li').live('click', function () {
    $(this).siblings('li.selected').removeClass('selected');
    $(this).toggleClass('selected');
});

// For all `selectable` lists to act together:
$('ul.selectable li').live('click', function () {
    $('li.selected').not(this).removeClass('selected');
    $(this).toggleClass('selected');
});

CSS：

ul.selectable li { cursor: pointer; }
ul.selectable li.selected { background: red; } /* Style to taste */

Answer 3

@ssdesign;我知道你接受了答案，但可能你可以查看这个 http://jsfiddle.net/sandeep/HgVmm/4/

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

Javascript CSS单选切换（垂直列表）

3 个答案: