0

私が作成しているもので、皆さんの 1 人が私を助けてくれることを願っていました。コンピューターでドキュメントを開くツリー スタイルのメニューを作成しています。これまでのところ、以下のコードは私が作成したものです。私の問題は、開いたときに完全に折りたたまれ、クリックしない限りコンテンツが表示されないようにすることです。どうすればこれを行うことができますか？また、箇条書きの代わりに、クリックするとマイナス記号に変わる小さなプラス矢印が必要ですか?何かアイデアはありますか? （私はこのすべてにちょっと慣れていません）

ありがとう

私のコードはここで見ることができることに注意してくださいhttp://cdpn.io/GtLky working (ただし、上記の修正が必要です) </p>

または、以下のこのセクションの完全なコード

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<p><font size=4>This is a test</font></p>                                                                                                                                                                                <body>
<ul>
    <li><span class="Collapsable">Test 1</span><ul>
        <li><span class="Collapsable">I like cats</span></li>
        <li><span class="Collapsable">Cats rule</span></li>
    </ul>
    </li>
    <li><span class="Collapsable">This is a test 2</span><ul>
        <li><span class="Collapsable">Cat love</span></li>
        <li><span class="Collapsable">testy cat</span></li>
    </ul>
    </li>
    <li><span class="Collapsable">This is a test 3</span><ul>
        <li><span class="Collapsable">Master Cat</span></li>
        <li><span class="Collapsable"><a href = "http://www.nme.com">NME</span></li>
    </ul>
    </li>
</ul>
<script type="text/javascript">
    $(".Collapsable").click(function () {

        $(this).parent().children().toggle();
        $(this).toggle();

    });


</script>
4

1 に答える 1

0

.Collapsable要素を少し整理し、デモ用にJSFiddleを作成しました。

基本的に、HTML を簡素化し、jQuery を強化します。

于 2013-08-04T17:09:40.277 に答える