HTML 二级分类选择
2021-01-23 本文已影响0人
HueyYao
HTML 二级分类选择
在开发文章管理的过程中希望可以让选择分类更加直观 所以对分类信息管理进行了优化
此功能是参考其他作者的源码依据自己的需求做的修改 所以一些样式和图片会和其他人一样！
用做自己梳理使用。
需求：二级分类选择 对分类样式进行修改 使其更加直观。
效果图如下：
1611403560(1).jpg
实现代码如下 js的数据用了测试数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<title>JS实现分类选择样式</title>
<style type="text/css">
@charset "utf-8";
/**Style Reset**/
body, div, span, h1, h2, h3, h4, h5, h6, p, pre, sup, sub, ul, ol, li, dl, dt, dd, form, fieldset, input, button, textarea, select, iframe, img, a, header, footer, section, article, aside, details, figcaption, figure, hgroup, nav, menu, canvas { padding: 0; margin: 0; }
body { background-color: #fff; color: #000; font: 12px/20px "Microsoft Yahei", Tahoma, Arial, "Helvetica Neue", "Hiragino Sans GB", Simsun, sans-self; }
ul, ol { list-style-type: none; }
b, strong { font-weight: normal; }
i, em { font-style: normal; }
a { text-decoration: none; color: #333; }
/*清除浮动*/
.clearfix:after { clear: both; display: block; height: 0; content: ""; }
/*主体部分*/
.contains { width: 1000px; margin: 0 auto; }
/*面包屑导航*/
.crumbNav { padding: 18px 0; color: #323232; }
.crumbNav a { color: #ed7f5a; }
.crumbNav a:hover { color: #d95459; }
.crumbNav font { padding: 0 2px; font-family: simsun; }
/**选择商品分类**/
.wareSort { padding: 15px 8px 15px 7px; border: 1px solid #ddd; background-color: #f6f6f6; }
.wareSort ul { float: left; width: 290px; padding: 10px; border: 1px solid #ddd; margin-right: 7px; margin-left: 8px; background-color: #fff; }
.wareSort ul li a { display: block; padding-right: 25px; padding-left: 10px; border: 1px solid #fff; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wareSort ul li a:hover { color: #52bea6; }
.wareSort ul li.active a { border-color: #52bea6; background: #cefff4 url(arrow.png) no-repeat right center; color: #52bea6; }
.selectedSort { padding: 10px 15px; border: 1px solid #ed7f5a; margin-top: 10px; margin-bottom: 10px; background-color: #fff4f0; color: #ed7f5a; }
.selectedSort b { font-weight: bold; }
.selectedSort i font { font-family: simsun; }
.wareSortBtn { padding-bottom: 50px; text-align: center; }
.wareSortBtn input { width: 200px; height: 36px; border: 1px solid #ed7f5a; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: #ed7f5a; color: #fff; }
.wareSortBtn input:hover { border-color: #d95459; background-color: #d95459; }
.wareSortBtn input:disabled { border-color: #ddd; background-color: #f6f6f6; color: #9a9a9a; cursor: default; }
#getTags{width:500px;word-break:break-all; word-wrap:break-word;}
#getTags li{float: left;background: #cecece; padding:2px 3px;margin: 5px;}
</style>
</head>
<body>
<form name="saveForm" id="saveForm" method="post" action="" onsubmit="return checkForm(this)" encType="multipart/form-data">
<table>
<tr>
<td>
<!--商品分类-->
<div class="wareSort clearfix">
<ul id="sort1"></ul>
<ul id="sort2" style="display: none;"></ul>
<ul id="sort3" style="display: none;"></ul>
</div>
<div class="selectedSort"><b>您当前选择的文章类别是：</b><i id="selectedSort"></i></div>
<input class="selectClassId" id="selectClassId" name="selectClassId" value="" type="hidden" >
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
//测试数据
var parent = ["父级1", "父级2", "父级3", "父级4", "父级5", "父级6", "父级7", "父级8"];
//二级分类
var chil = [
["子集1-1", "子集1-2", "子集1-3"],
["子集2-1", "子集2-2", "子集2-3", "子集2-4"],
["子集3-1", "子集3-2", "子集3-3"],
["子集4-1", "子集4-2", "子集4-3", "子集4-4", "子集4-5", "子集4-6", "子集4-7", "子集4-8"],
["子集5-1"],
["子集6-1", "子集6-2", "子集6-3"],
["子集7-1", "子集7-2"],
["子集8-1", "子集8-2", "子集8-3"],
];
/*定义三级分类数据*/
//一级分类
//var parent = {{$hpClassParentListArray}};//父级数据
//var chil = {{$hpClassChildrenListArray}};//子级别数据
var expressOne,expressP, expressC, areaCont;
var arrow = " <font>></font> ";
/*初始化一级目录*/
function intHelpCenterClass() {
areaCont = "";
console.log(parent);
for (var i=0; i<parent.length; i++) {
areaCont += '<li onClick="selectP('+ i + ');"><a href="javascript:void(0)">' + parent[i] + '</a></li>';
}
$("#sort1").html(areaCont);
}
intHelpCenterClass();
/*选择一级目录*/
//p为 父级数据主键ID i为排序数组id
function selectP(p) {
areaCont = "";
document.getElementById('selectClassId').value=p;
for (var j=0; j<chil[p].length; j++) {
areaCont += '<li onClick="selectC(' + p + ',' + j + ');"><a href="javascript:void(0)">' + chil[p][j] + '</a></li>';
}
$("#sort2").html(areaCont).show();
$("#sort3").hide();
$("#sort1 li").eq(p).addClass("active").siblings("li").removeClass("active");
expressP = parent[p]
$("#selectedSort").html(expressP);
$("#releaseBtn").removeAttr("disabled");
}
/*选择二级目录*/
//p为 父级数据主键ID ,c为子数据排序id childId为子数据主键ID
function selectC(p,c) {
areaCont = "";
expressC = "";
console.log(chil);console.log(p);console.log(c);
$("#sort2 li").eq(c).addClass("active").siblings("li").removeClass("active");
expressC = expressP + arrow + chil[p][c];
$("#selectedSort").html(expressC);
}
</script>
</html>
代码中用到的图片如下：
arrow.png
另存为图片修改名称为arrow.png 和该html文件放到同级目录下即可实现图中效果
