jquery无序列表使用ctrl进行多选

时间:2014-06-17 11:31:01

标签: javascript jquery html

我想在单击<li>项目并按住 ctrl 键并在点击<li>而不按住时在未归序列表上创建多选ctrl 它只是选择当前项目并取消选择其他项目。

<div class="list">
    <ul class="level0">
        <li class="level1">text1</li>
        <li class="level1">text2</li>
        <li class="level1">text3</li>
        <li class="level1">text4</li>
        <li class="level1">text5</li>
    </ul>
    <ul class="level0">
        <ul class="level1">
            <li class="level2">text1</li>
            <li class="level2">text2</li>
            <li class="level2">text3</li>
            <li class="level2">text4</li>
            <li class="level2">text5</li>
        </ul>
        <ul class="level1">
            <li class="level2">text1</li>
            <li class="level2">text2</li>
            <li class="level2">text3</li>
            <li class="level2">text4</li>
            <li class="level2">text5</li>
        </ul>
    </ul>
</div>

有任何想法吗?

1 个答案:

答案 0 :(得分:4)

您可以使用jquery检查在收听事件时是否按下了修改键。您可以检查传递给处理程序的事件对象上的以下键:

altKey - alt/option key
ctrlKey - control key
shiftKey - shift key
metaKey - control key on PCs, control and/or command key on Macs

示例:

var lis = $('.list li').click(function(e){
    if(!e.ctrlKey) {
        // Ctrl not pressed, clear previous selections
         lis.removeClass("selected");      
    }
    $(this).addClass("selected");    
});

工作小提琴: http://jsfiddle.net/AM2Sk/