jquery - 切换鼠标点击可选择的元素

Question

我需要实现的是

1）我每次点击都可以选择几个元素。

2）当我再次单击所选元素时，它应该被取消选择

HTML 代码：

<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
     <li class="ui-widget-content">Item 2</li>
     <li class="ui-widget-content">Item 3</li>
     <li class="ui-widget-content">Item 4</li>
     <li class="ui-widget-content">Item 5</li>
     <li class="ui-widget-content">Item 6</li>
     <li class="ui-widget-content">Item 7</li>
</ol>

代码：

#feedback {
    font-size: 1.4em; }
#selectable .ui-selecting {
     background: #FECA40; }
#selectable .ui-selected {
     background: #F39814;
     color: white; }
#selectable {
     list-style-type:
     none; margin: 0;
     padding: 0;
     width: 60%; }
#selectable li {
     margin: 3px;
     padding: 0.4em;
     font-size: 1.4em;
     height: 18px; }

查询代码：

$(function() {
    $( "#selectable" ).selectable();
});

在 jquery 站点中查看此代码

Answer 1

好的，我希望我的回答会有所帮助。在这里，您应该做的是将您的元键设置为true on mouse down event。在示例代码中，事件被绑定。我从 stackoverflow 本身这里得到了这个，这里。

现在针对您的具体问题，请单击以下链接 JSFIDDLE