Переключить elemnts в выбираемом по щелчку мыши

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>

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:

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

просмотреть этот код на сайте jquery

Answer 1

Хорошо, я надеюсь, что мой ответ поможет. Здесь вы должны установить для метакладки значение true на mouse down event, В примере кода событие связывается. Я получил это от самого stackru здесь, здесь.

Теперь для вашей конкретной проблемы нажмите следующую ссылку JSFIDDLE