公司项目中用到的全国省市的一个折叠效果

这也是今天公司项目中的一部分,希望正在找这方面资料的朋友能用得上
1.CSS
.diqu{display:none;}
2.脚本
 $(function () {
            selectall();
            $(":checkbox[a]").click(function () {
                $(":checkbox[flag=" + $(this).val() + "]").attr("checked", $(this).prop("checked")); selectall();
            })
            $(":checkbox[flag]").click(function () {
                var flag = $(this).attr("flag"); var count = $(":checkbox[flag=" + flag + "]").length;
                var checkcount = $(":checkbox[flag=" + flag + "]:checked").length;
                $(":checkbox[value=" + flag + "]").attr("checked", count == checkcount ? true : false);
                selectall();
            });
            $("div[b]").click(function () {
                $(".diqu").hide();
                $(this).next("ul").toggle();
            });
        })
        function selectall() {
            var str = "";
            $(":checkbox[flag]:checked").each(function () {
                str += $(this).attr("flagval") + ",";
            })
            str = str.substring(0, str.lastIndexOf(","));         
                $("#result").html(str);          
        }
3.html+C#

   <ul class="clr" style="height: auto; overflow: hidden;">
                <li class="spL">地区:</li>
                <li style=" 535px; height: auto;">
                    <div style=" 530px; padding-top: 5px; clear: both; overflow: hidden;" id="result">
                    </div>
                    <div style=" 530px; padding-top: 5px; clear: both; overflow: hidden;">
                        <%foreach (Model.tabCity mt in Tcidlist)
                          { %>
                        <div class="city" style="clear: both; 528px; margin-bottom: 5px; border: 1px solid #e4e4e4;overflow: hidden;">
                            <div b="b" style="border-bottom: 1px solid #E4E4E4; padding: 4px 0 0 4px;cursor: pointer;background-color:#e1ecf4;">
                                <input a="a" type="checkbox" <%if(Common.Functions.checkHave(ChengShiID,mt.CityID.ToString())){%>checked="checked"
                                    <%} %> name="CityID" value="<%=mt.CityID %>" /><%=mt.CityName %>
                                <%GetDiQuByCityID(mt.CityID); %>
                            </div>
                            <ul class="diqu" style="clear: both; border-bottom: 0px; 530px; margin:5px 5px 5px 15px;height: auto;overflow: hidden;">
                                <%foreach (Model.tabCity diqu in listdiqu)
                                  { %>
                                <li style=" 170px; height: auto;overflow: hidden;">
                                    <input type="checkbox" flag="<%=mt.CityID %>" flagval="<%=diqu.CityName %>" name="Tcid" <%if(Common.Functions.checkHave(DiQuID,diqu.Tcid.ToString())){%>checked="checked"
                                        <%} %> value="<%=diqu.Tcid %>" /><%=diqu.CityName %></li>
                                <%} %>
                            </ul>
                        </div>
                        <%} %>
                    </div>
                </li>
            </ul>    
4.纯html

<ul class="clr" style="height: auto; overflow: hidden;"><li class="spL">地区:</li><li style=" 535px; height: auto;"><div style=" 530px; padding-top: 5px; clear: both; overflow: hidden;" id="result"></div><div style=" 530px; padding-top: 5px; clear: both; overflow: hidden;"><div class="city" style="clear: both;  528px; margin-bottom: 5px; border: 1px solid #e4e4e4;overflow: hidden;"><div b="b" style="border-bottom: 1px solid #E4E4E4; padding: 4px 0 0 4px;cursor: pointer;background-color:#e1ecf4;"><input a="a" type="checkbox"  name="CityID" value="150100" />呼和浩特市                                                            </div><ul class="diqu" style="clear: both; border-bottom: 0px;  530px; margin:5px 5px 5px 15px;height: auto;overflow: hidden;"><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="市辖区" name="Tcid"  value="729" />市辖区</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="新城区" name="Tcid"  value="730" />新城区</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="回民区" name="Tcid"  value="731" />回民区</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="玉泉区" name="Tcid"  value="732" />玉泉区</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="赛罕区" name="Tcid"  value="733" />赛罕区</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="土默特左旗" name="Tcid"  value="734" />土默特左旗</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="托克托县" name="Tcid"  value="735" />托克托县</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="和林格尔县" name="Tcid"  value="736" />和林格尔县</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="清水河县" name="Tcid"  value="737" />清水河县</li><li style=" 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="武川县" name="Tcid"  value="738" />武川县</li></ul></div>
</div></li></ul>
原文地址:https://www.cnblogs.com/zpc870921/p/2640541.html