html二级分类文字效果,HTML 二级分类选择

HTML 二级分类选择

在开发文章管理的过程中希望可以让选择分类更加直观 所以对分类信息管理进行了优化

此功能是参考其他作者的源码依据自己的需求做的修改 所以一些样式和图片会和其他人一样！

用做自己梳理使用。

需求：二级分类选择 对分类样式进行修改 使其更加直观。

效果图如下：

1611403560(1).jpg

实现代码如下 js的数据用了测试数据

JS实现分类选择样式

@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;}

您当前选择的文章类别是：

//测试数据

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 = " > ";

/*初始化一级目录*/

function intHelpCenterClass() {

areaCont = "";

console.log(parent);

for (var i=0; i

areaCont += '

' + parent[i] + '';

}

$("#sort1").html(areaCont);

}

intHelpCenterClass();

/*选择一级目录*/

//p为 父级数据主键ID i为排序数组id

function selectP(p) {

areaCont = "";

document.getElementById('selectClassId').value=p;

for (var j=0; j

areaCont += '

' + chil[p][j] + '';

}

$("#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);

}

代码中用到的图片如下：

arrow.png

另存为图片修改名称为arrow.png 和该html文件放到同级目录下即可实现图中效果