折叠面板

 

1：css

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        #ul_f {
            width: 200px;
            background-color: #0fbd4d;
            color: white;
        }

            #ul_f li {
                text-align: left;
                border: 1px solid #0a975f;
            }

        .ul_s {
            background-color: #38d34a;
            display: none;
        }

        .newClass1 {
            background-image: url(images/pro_left.png);
            background-repeat: no-repeat;
            background-position: 180px 0px;
        }

        .newClass {
            background-image: url(images/pro_down.png);
            background-repeat: no-repeat;
            background-position: 180px 0px;
        }
    </style>

　　2:js

 <script type="text/javascript">
        var isOut = true;
        $(function () {
            $("#ul_f li").click(function () {
                if (isOut) {
                    $(this).children("ul").slideToggle();
                    $(this).siblings().children("ul").slideUp();
                    $(this).toggleClass("newClass").siblings().removeClass("newClass");
                }
                else {
                    return;
                }
            })
            $(".ul_s").mouseover(function () {
                isOut = false;
            }).mouseout(function () {
                isOut = true;
            })


            $(".ul_s a").click(function () {
                
                $("#iframes").attr("src", $(this).attr("target"));
            })
        })
    </script>

　　3:html

 <div style="border: 1px solid black; position: relative; float: left;height:200px">
            <span style="color: #ff6a00">导航：</span>
            <ul id="ul_f">
                <li class="newClass1">幼儿园
                <ul class="ul_s">
                    <li> 幼儿一班</li>
                    <li> 幼儿二班 </li>
                </ul>
                </li>
                <li class="newClass1">小学部
                  <ul class="ul_s">
                      <li>三年一班</li>
                      <li>四年二班</li>
                  </ul>
                </li>
                <li class="newClass1">初中部
                  <ul class="ul_s">
                      <li>初一二班</li>
                      <li>初二四班</li>
                  </ul>
                </li>
                <li class="newClass1">高中部
                 <ul class="ul_s">
                     <li>高一三班</li>
                     <li>高三五班</li>
                 </ul>
                </li>
            </ul>
        </div>