0

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

$(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>
4

2 回答 2

0

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

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

于 2012-06-05T21:18:52.000 回答
0

当我展开每个节点时，jQuery 树视图示例正在设置 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();      

            });
于 2012-06-12T19:32:11.193 回答