javascript - jquery 无序列表多选与 ctrl

<分区>

我想在点击 <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>

有什么想法吗？

最佳答案

您可以使用 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");    
});

工作 fiddle : http://jsfiddle.net/AM2Sk/

关于javascript - jquery 无序列表多选与 ctrl，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24262643/

上一篇：javascript - jquery 2.1.1 可排序示例不起作用

下一篇：javascript - 垂直对齐按钮在 Ionic 中没有滚动

相关文章：

javascript - 用于将字符填充到字符串末尾的jquery函数

javascript - 无限滚动而不加载图像

javascript - 跨动态数量的单选按钮组实现依赖

javascript - 在javascript中添加两个 float

javascript - 将多个选择转换为常规选择

javascript - JavaScript 和 ActionScript 3 之间的主要区别是什么？

javascript - 如何制作平行线

jQuery 选择器

html - 制作部分不在屏幕上的 div，它不会向屏幕添加水平滚动

html - 反斜杠出现在 CSS 字体声明中，不允许出现网络字体