javascript - Javascript ツリー構造の HTML メニュー - 選択の問題

Question

ここに状況があります：

これが私のメニューです。これは基本的に、アイテムのリストを表示するための ulli 階層です。

<ul id="treeMenu">

        <li id="Sites" class="contentContainer">
            <img src="images/plus.PNG">
            <input type="checkbox" value="Nichols San Juan Capistrano" id="Nichols San Juan Capistrano">Nichols San Juan Capistrano
            <br>

        <ul style="display: none" id="site1"> 


        <li id="Department" class="contentContainer">
            <img src="images/plus.PNG">
            <input type="checkbox" value="Endocrine Metabolism" id="Endocrine Metabolism">Endocrine Metabolism
            <br>

        <ul style="display: none" id="dept1">


            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMBN1" onclick="loadXMLInstrDoc(this)" id="EZEMBN1" name="instr">EZEMBN1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMTripti1" onclick="loadXMLInstrDoc(this)" id="EZEMTripti1" name="instr">EZEMTripti1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMTripti2" onclick="loadXMLInstrDoc(this)" id="EZEMTripti2" name="instr">EZEMTripti2
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMTripti3" onclick="loadXMLInstrDoc(this)" id="EZEMTripti3" name="instr">EZEMTripti3
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMTripti4" onclick="loadXMLInstrDoc(this)" id="EZEMTripti4" name="instr">EZEMTripti4
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMMini1" onclick="loadXMLInstrDoc(this)" id="EZEMMini1" name="instr">EZEMMini1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMTripti5" onclick="loadXMLInstrDoc(this)" id="EZEMTripti5" name="instr">EZEMTripti5
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMParul1" onclick="loadXMLInstrDoc(this)" id="EZEMParul1" name="instr">EZEMParul1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMPooja1" onclick="loadXMLInstrDoc(this)" id="EZEMPooja1" name="instr">EZEMPooja1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMRicha1" onclick="loadXMLInstrDoc(this)" id="EZEMRicha1" name="instr">EZEMRicha1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="EZEMPrahalad1" onclick="loadXMLInstrDoc(this)" id="EZEMPrahalad1" name="instr">EZEMPrahalad1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="Abhijeet123" onclick="loadXMLInstrDoc(this)" id="Abhijeet123" name="instr">Abhijeet123
                <br>
            </li>

        </ul>
        </li>

        </ul>
    </li>

        <li id="Sites" class="contentContainer">
            <img src="images/plus.PNG">
            <input type="checkbox" value="Nichols Valencia" id="Nichols Valencia">Nichols Valencia
            <br>

        <ul style="display: none" id="site2"> 


        <li id="Department" class="contentContainer">
            <img src="images/plus.PNG">
            <input type="checkbox" value="Automated Lab" id="Automated Lab">Automated Lab
            <br>

        <ul style="display: none" id="dept2">


            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="NEPH4" onclick="loadXMLInstrDoc(this)" id="NEPH4" name="instr">NEPH4
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="SLIALTripti1" onclick="loadXMLInstrDoc(this)" id="SLIALTripti1" name="instr">SLIALTripti1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="SLIALBN1" onclick="loadXMLInstrDoc(this)" id="SLIALBN1" name="instr">SLIALBN1
                <br>
            </li>

            <li id="Instruments" class="contentContainer">
                <input type="checkbox" value="Neph5" onclick="loadXMLInstrDoc(this)" id="Neph5" name="instr">Neph5
                <br>
            </li>

        </ul>
        </li>

        </ul>
    </li>

        </ul>

plus img をクリックし、その子に style=display:none; を持たせる必要があります。display:block に変更する必要があり、最後のレベルと他<li>のレベルまで同じことが起こるはずです

今、私は<li>のクリックのためにそれをやっています

 $(document).ready(function() {

            $("#treeMenu li").toggle(           

                  function() { // START FIRST CLICK FUNCTION
                      $(this).children('ul').slideDown()
                      if ($(this).hasClass('contentContainer')) { 
                          $(this).attr("checked","checked");  
                          $(this).removeClass('contentContainer').addClass('contentViewing');
                      }
                  }, // END FIRST CLICK FUNCTION

                  function() { // START SECOND CLICK FUNCTION
                      $(this).children('ul').slideUp()

                      if ($(this).hasClass('contentViewing')) {

                          $(this).removeClass('contentViewing').addClass('contentContainer');
                      }
                        } // END SECOND CLICK FUNCTIOn
                    ); // END TOGGLE FUNCTION 

        });

あなたの提案と解決策を流してください...乾杯!!!

私の要件である以下の質問を参照してください。

http://stackoverflow.com/questions/11324224/javascript-create-3-level-tree-two-column-selection-boxes-html