Question

我正在尝试使用位于此处的TreeView插件： http://docs.jquery.com/Plugins/Treeview

它具有的一个选择是“独特” - 一次只扩展一个项目。

它非常适用于显示目的，但后来我尝试挂钩到TreeView的“toggle”属性/事件，以找出哪一个已经完全展开。

当“unique”设置为true时，传递给“toggle”的函数似乎会被激活每个主列表元素，从而阻止我捕获哪一个实际初始化扩展。我明白为什么这样做 - 确保其他元素被切换，只有一个被扩展。

关于如何仅获取切换/展开的“唯一”列表项的ID的任何想法。

下面的示例代码

$(document).ready(function() {
$("#browser").treeview({
    collapsed: true,
    unique: true,
    toggle: function()
    {
            $('#console').append(this.id + ' was toggled');
    }
 });
});

<ul>
<li id="1">Ottawa
    <ul>
        <li>Item 1</li>
        <li>Item 9</li>
    </ul>
</li>
<li id="2">Montreal
    <ul>
        <li>Item 2</li>
        <li>Item 8</li>
    </ul>
</li>
<li id="3">Quebeque
    <ul>
        <li>Item 3</li>
    </ul>
</li>
<li id="4">Calgary
    <ul>
        <li>Item 7</li>
    </ul>
</li>
<li id="6">Toronto
    <ul>
        <li>Item 10</li>
    </ul>
</li>
</ul>
<div id="console"></div>

Answer 1

该插件可以使用更多的事件，但您可以通过检查是否有任何可见的子项轻松判断哪一个被点击：

if($(this).find("ul:visible").length)
{
    $('#console').append(this.id + ' was toggled');
}

根据您的HTML结构，您可以将find更改为更快children。这仍会为所有节点运行toggle事件，但会检查正确的节点请参阅此处的操作：http://jsbin.com/esoxu

jQuery插件的问题TreeView在唯一设置为true时切换

1 个答案: