Javascript树结构化HTML菜单 - 选择问题

Question

我有一个情况：

这是我的菜单;它基本上是一个用于显示项目列表的层次结构。

<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>

我需要点击加上img并且其子项的style = display：none;应该更改为显示：阻止，同样应该发生到最后一级和其他<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