在鼠标单击时切换可选择的元素

时间:2013-03-08 08:22:59

标签: jquery jquery-ui selectable jquery-ui-selectable jquery-ui-widget

我需要实现的是

1)我可以在每次点击时选择几个元素。

2)当我再次点击所选元素时,应该取消选择

HTML CODE:

<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>

CSS代码:

#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; }

JQUERY CODE:

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

view this code in jquery site

1 个答案:

答案 0 :(得分:1)

好的,我希望我的回答会有所帮助。在这里,您应该做的是在mouse down event上将metakey设置为true。在示例代码中,事件为binded。我从stackoverflow本身herehere得到了这个。

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