google 梅花雪控件，一直使用这个js控件，目前项目也用的上，扩展调试中...

多重循环

DTree

我有一个实现, 不知道是不是你想要的那样, 希望对你有帮助!

http://www.cnblogs.com/chenkun/archive/2010/12/29/1920575.html

写个CSS，把要显示的曾隐藏起来，单击按钮将层显示，在单击其他地方，将其隐藏即可。

<script type="text/javascript">
         $(document).bind('click', function (e) {
            $(".SelectTitle").css("border-bottom-color", "#999");
            var clickme = $(e.target);
            if (!clickme.hasClass("SelectTitle")) {
                $(".SelectBox").hide();   //在不是列表输入区域单击时（有可能是空白区或者下拉列表中单击）   
                if (clickme.parents(".SelectContainer").hasClass("SelectBox")) {     //在下拉列表中单击时执行   
                    clickme.parents(".SelectContainer").prev().html(clickme.html());
                    clickme.parents(".SelectContainer").prev().attr("attrid", clickme.attr("attrid"));
                }
            }
            else {
                $(".SelectBox").hide();  //先全体隐藏，再显示点中的下拉列表层 
				var _Container= clickme.parents(".SelectContainer"); 
                _Container.children(".SelectBox").show();
                $("a.SelectTitle,div.SelectTitle",_Container).css("border-bottom-color", "#ddd");
            }
			
        }); 
		
    </script>

<div class="SelectContainer">
                        <div style="border-bottom-color: rgb(153, 153, 153);" class="profinal_small_btn_g SelectTitle">
                            <a style="border-bottom-color: rgb(153, 153, 153);" href="javascript:void(0);" class="profinal_small_btn_g SelectTitle">
                                单击我<img src="/_Images/index_point_down_b.gif" style="vertical-align: middle;
                                    border-bottom-color: rgb(153, 153, 153);" alt="wordoor" class="SelectTitle" border="0"
                                    height="4" width="8"></a></div>
                        <div class="clear">
                        </div>
                        <!--1st drop down menu -->
                        <div class="SelectBox SelectBox2" style="display: none;">
                            <a href="#" style="border: 0px;">
                             巴巴</a>
                           
                            <a href="#" style="border: 0px;">
                               啊啊啊</a>
                            </div>
                    </div>