代码之家  ›  专栏  ›  技术社区  ›  andryuha

当unique设置为true时,jquery插件treeview的切换出现问题

  •  1
  • andryuha  · 技术社区  · 15 年前

    我正在试验位于此处的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>
    
    1 回复  |  直到 15 年前
        1
  •  1
  •   Kobi    15 年前

    这个插件可以使用更多的事件,但是您可以通过检查它是否有任何可见的子项来很容易地判断单击了哪个事件:

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

    根据您的HTML结构,您可以更改 find 越快越好 children . 这仍然运行 toggle 所有节点的事件,但检查正确的节点。
    请参见此处的实际操作: http://jsbin.com/esoxu