Question

当我单击+/-符号时，以及单击每个符号旁边的文本（超链接）时，我想展开和折叠节点。我想折叠上一个节点并展开我点击的节点。我使用以下方法。

$(document).ready(function(){

    // first example
    $("#navigation").treeview({
        persist: "cookie", //I want to store the state and come back to the state when i reload the page.
        collapsed: true, //I want to collapse all the nodes when i load.
        unique:true //I want to open only one node at a time
    });
});

我尝试了很多选项，但没有一个可行。请帮帮我。

我的HTML是：

 <ul id="navigation" class="treeview">
            <li>
                <div>
                    <a href="#">Marketing</a>
                </div>
                <ul>
                    <li>
                        <div>
                            <a href="#">Joysticks</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <a href="#">Intel</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Microsoft</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Sony</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <a href="#">Laptops</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <a href="#">Apple</a>
                                </div>
                                <ul>
                                    <li>
                                        <div>
                                            <a href="#">iMac</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">MacBook Air</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">MacBook Pro</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">Accessories</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Dell</a>
                                </div>
                                <ul>
                                    <li>
                                        <div>
                                            <a href="#">Inspiron</a>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <a href="#">XPS</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Sony</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <a href="#">Phones</a>
                        </div>
                        <ul>
                            <li>
                                <div>
                                    <a href="#">LG</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Motorola</a>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <a href="#">Samsung</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>

Answer 1

您的代码隐藏生成<div><a href="#">Marketing</a></div>。显然，有两个级别的标签有问题。将结构更改为<span>Marketing</span>，它将起作用。我的猜测是，如果您愿意，可以使用<a>或<div>。

我在这里进行了这些更改并且有效： http://jsfiddle.net/lbstr/V7A6A/2/

Answer 2

jQuery treeview示例在展开每个节点时设置了cookie。我在每个站点/页面的代码中构建了相同的逻辑（如何在我们单击每个节点时生成id），然后在生成标记时将此id分配给a标记。然后在document.ready函数中，我编写了以下逻辑来设置每次单击时的cookie ID。

            jQuery.fn.alertElementUrl = function()
            {
                return this.each(function()
                {
                    if(this.id == "")
                    {
                        $.cookie("treeview", $.cookie("treeview"),{path: '/'} );
                        window.location = this.href;
                    }
                    else
                    {
                        $.cookie("treeview", this.id.substring(this.id.lastIndexOf('_')+1),{path: '/'} );
                        window.location = this.href;
                    }
                });     
            };

            $("a").click(function ()
            {
                $(this).alertElementUrl();      

            });

Jquery Treeview展开和折叠节点上的文本单击使用persist cookie选项

2 个答案: