javascript - Jquery UI 可选的“多个实例”

Question

这可能吗？我当然希望是这样。我有多个 ui-selectable 实例，当我单击它们时，我希望其他实例也关闭。目前它切换每个 div 之一。有没有办法修改我的javascript或让它们切换两个实例的方法？

例子：

<script type='text/javascript'>
$(window).load(function(){
$(".ui-selectable").selectable();
});
</script>

<div class="ui-selectable">
<ul>
<li>text</li>
<li>text</li>
</ul>
</div>

<div class="ui-selectable">
<ul>
<li>text</li>
<li>text</li>
</ul>
</div>

Answer 1

问题是当它应该是无序列表（ul）时，您正在使 DIV 可选。这是一个演示：http: //jsfiddle.net/H8fPL/21/。需要帮助请叫我。

编辑：

我想这就是你要找的。这是演示：http: //jsfiddle.net/H8fPL/60/

我还提供了下面的代码......

JAVASCRIPT：

$( ".selectable" ).selectable({
stop: function(event, ui) {
    var el_id = $(this).children("ul").attr("id");

    $("ul.ui-selected").not("#" + el_id).each(function(index, element) { 
       $(element).toggleClass("ui-selected");
        if($(element).children("li").hasClass("ui-selected")){
           $(element).children("li").removeClass("ui-selected");
           }
    });
}
});

HTML：

<div id="div1" class="selectable">
<ul id="ul1">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>
</div>
<div id="div2" class="selectable">
<ul id="ul2">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
</ul>
</div>

Answer 2

试试这个：

$('.ui-selectable').each(function (){ $(this).toggle(); });