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

あなたはコードビハインドが生成し<div><a href="#">Marketing</a></div>ます。どうやら、2つのレベルのタグがあることに何か問題があります。構造をjustに変更する<span>Marketing</span>と、機能します。私の推測では、あなたが使うことができる<a>か<div>、あなたが望むなら。

私はここでそれらの変更を行いました、そしてそれは機能します：http: //jsfiddle.net/lbstr/V7A6A/2/

于 2012-06-05T21:18:52.000 に答える
0

jQueryツリービューの例では、各ノードを展開するときにCookieを設定していました。各サイト/ページのコードビハインドで同じロジック（各ノードをクリックしたときにIDを生成するために使用された方法）を構築し、タグを生成するときにこのIDをタグに割り当てました。次に、document.ready関数で、クリックするたびにCookieIDを設定する次のロジックを記述しました。

            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 に答える