سوال : select & unselect

[prince4prodigy]

من یک کد HTML مشایه کد زیر دارم:


<ul id="selectable">
<li class="ui-state-default"><span>AAA</span> </li>
<li class="ui-state-default"><span>BBB</span></li>
<li class="ui-state-default"><span>JAVA CCC</span></li>
<li class="ui-state-default"><span>DDD</span></li>
<li class="ui-state-default"><span>EEE</span></li>
<li class="ui-state-default"><span>FFF</span></li>
</ul>

این هم کد JQuery:

$(function(){
$('#selectable').selectable({
selected: function (event, ui) {
if ($(ui.selected).hasClass('ui-state-default')) {
$(ui.selected).removeClass('ui-state-default')
.addClass('ui-state-active')
.bind('mousedown',function(){
$(ui.selected).removeClass(ui.selected).addClass(u i.unselected);
$(ui.selected).prop(ui.unselected,true)
})
} else {
$(ui.unselected).addClass('ui-state-active')

}
}
});

با css هم ظاهر هرکردوم از li ها رو به صورت یه مربع کردم که با استفاده از JQuery UI موقع انتخاب شدن کلاس ui-state-active رو به اونها نسبت میدم و در حالت عادی کلاس ui-state-default رو دارن.

حالا مسئله ی اصلی اینجاست که میخوام وقتی که روی یک li که قبلا selected شده کلیک کردم دوباره unselected بشه. یعنی در واقع علاوه بر کلاس ui-state-default کلاس ui.unselected رو هم بگیره تا علاوه و مشخصات ظاهری به شکلِ کاملا صحیح از حالت انتخاب خارج بشه....