公司项目中用到的全国省市的一个折叠效果
2012-08-15 17:57 C#与.NET探索者 阅读(211) 评论(0) 编辑 收藏 举报这也是今天公司项目中的一部分，希望正在找这方面资料的朋友能用得上
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="width:
535px; height: auto;">
<div style="width: 530px;
padding-top: 5px; clear: both; overflow: hidden;"
id="result">
</div>
<div style="width: 530px; padding-top: 5px; clear: both; overflow:
hidden;">
<%foreach (Model.tabCity mt in
Tcidlist)
{ %>
<div class="city" style="clear: both; width: 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; width: 530px;
margin:5px 5px 5px 15px;height: auto;overflow:
hidden;">
<%foreach (Model.tabCity diqu
in listdiqu)
{
%>
<li style="width: 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="width: 535px; height: auto;"><div style="width: 530px; padding-top: 5px; clear: both; overflow: hidden;" id="result"></div><div style="width: 530px; padding-top: 5px; clear: both; overflow: hidden;"><div class="city" style="clear: both; width: 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; width: 530px; margin:5px 5px 5px 15px;height: auto;overflow: hidden;"><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="市辖区" name="Tcid" value="729" />市辖区</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="新城区" name="Tcid" value="730" />新城区</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="回民区" name="Tcid" value="731" />回民区</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="玉泉区" name="Tcid" value="732" />玉泉区</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="赛罕区" name="Tcid" value="733" />赛罕区</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="土默特左旗" name="Tcid" value="734" />土默特左旗</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="托克托县" name="Tcid" value="735" />托克托县</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="和林格尔县" name="Tcid" value="736" />和林格尔县</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="清水河县" name="Tcid" value="737" />清水河县</li><li style="width: 170px; height: auto;overflow: hidden;"><input type="checkbox" flag="150100" flagval="武川县" name="Tcid" value="738" />武川县</li></ul></div>
</div></li></ul>
