-1

軽量のソリューションが欲しかったので、これを見つけましたが、展開可能なカテゴリの名前の横にあるプラス記号「+」をクリックすると展開されます。このデモンストレーションを機能させるために、+を赤い四角に、-を青い四角に置き換えました。ライブコード：http：//jsfiddle.net/2VXuk/2/

リンクではないカテゴリに展開可能なサブレベルを作成し、その名前をクリックするとコンテンツを展開するように変更するのに助けが必要です。

それをカテゴリにするオプションがあると便利です-クリックで展開するか、リンクで展開して+クリックし、名前のクリックでリダイレクトします。例えば

<ul id="sitemap">
<li><a class="category" href="#">expands only</a> 
    <ul>
        <li><a href="#">Sample</a></li>
        <li><a href="#">Sample</a></li>
        <li><a class="category_and_link" href="psy.html">Link to page or expand on + button</a>
            <ul>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
                <li><a href="#">Sample</a></li>
            </ul>                           
        </li>
        <li><a href="#">Fourth link</a></li>
        <li><a href="#">Fifth link</a></li>
    </ul>                   
</li>
</ul>

<script type="text/javascript">
this.sitemapstyler = function(){
    var sitemap = document.getElementById("sitemap")
    if(sitemap){

        this.listItem = function(li){
            if(li.getElementsByTagName("ul").length > 0){
                var ul = li.getElementsByTagName("ul")[0];
                ul.style.display = "none";
                var span = document.createElement("span");
                span.className = "collapsed";
                span.onclick = function(){
                    ul.style.display = (ul.style.display == "none") ? "block" : "none";
                    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
                };
                li.appendChild(span);
            };
        };

        var items = sitemap.getElementsByTagName("li");
        for(var i=0;i<items.length;i++){
            listItem(items[i]);
        };

    };  
};

window.onload = sitemapstyler;
</script>
4

1 に答える 1

0

あなたのjsFiddleの私のフォークを見てください。基本的な考え方は、要素をつかむことaです...

var a = li.getElementsByTagName("a")[0];

また、それにイベントハンドラーを追加します。

if (!a.hasAttribute("href"))
    a.onclick = showHide;

リンク以外の場合は、href属性を省略してください。

于 2012-05-12T01:52:08.097 に答える