【水蓝石】 html+jquery+css+django 菜单多级带图标变换隐藏展开，同类选择框选中与否都能回值，以及django反爬虫中间件

也不是什么珍贵的东西，就直接把源代码分享给大家了，放在最后面。

前面就写一个我在写这个的时候解决的问题，以便以后查找

更理解div是种内容横着排，div之间竖着排的东西了

更理解div是一个容器，下面的东西就是内包的元素

更理解css和js，以及js和jquery设置的不同了

知道了可以全局设置所有同标签的怎样，也可以直接找class（css）和id（js，jquery）

知道了表单和checkbox，同name的checkbox都不选中就提交会报错，一般弄一个hidden的隐藏域来做辅助

知道了点击收缩展开其实就是，点击onClick连接到js，把要改display的id传过去，写个if else，改display就可以了

知道了冒泡事件，以及怎么终止

知道了多个触发事件同时放在一个div或什么里时，最好将其中几个放在function里，这样能规范顺序，也能解决莫名的bug

关于那个图标，就是知道了css里面的after和before其实就是出现在div的最开头和最末尾的地方而已，没啥东西。点击展开收缩改那个图标其实都靠的点击onClick触发事件函数中，更改css的样子。content,before就是改前面的图标

django中间件我也不是很懂，反正就给个网址呗https://blog.csdn.net/kuanggudejimo/article/details/104041361?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_utm_term-1&spm=1001.2101.3001.4242

css有个设置是padding-left的属性，就是左边留白。注意，这个留白会陷入那个div的套嵌，子元素自动留了父元素的白了。

那个点击一个东西，下面input全部选中的，其实就是找到下面所有input的id列表，循环访问，一个个改成需要的

基本就这些了，有空再一个个填上

效果图

源代码放在这里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<title>三级竖向展开/收缩导航菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<style>
a {
	color: #000000;
	text-decoration: none;
}
a:hover {
	color: #ff0000;
	text-decoration: underline;
}
.label-add:before {
	content:"\2723";
padding-left:20px;
}
.label-reduce:before{
	content:"\2013";
padding-left:20px;
}
.aps {
	margin-left: 0px;
	display: none;
padding-left:30px;
}
.ps2 {
	margin-left: 0px;
	display: none;
padding-left:30px;
}
.ps3 {
	margin-left: 0px;
	display: none;
padding-left:30px;
}

.gaoliang {
	margin-left: 0px;
	display: none;
padding-left:30px;
}
.gaoliang1 {
	margin-left: 0px;
	display: none;
padding-left:15px;
}

.xinxizongjie {
	margin-left: 0px;
	display: none;
padding-left:30px;
}
.xinxizongjie1 {
	margin-left: 0px;
	display: none;
padding-left:15px;
}
.open {
	cursor: pointer;
	line-height: 20px;
	padding-left: 20px;
	height: 20px;
                display: inline-block;
}

.dot {
	cursor: pointer;
	background: url(images/dot.gif) no-repeat;
	line-height: 20px;
	padding-left: 20px;
	height: 20px;

}
.content {
	padding: 8px 0;
	float:left;
}
</style>
</head>

                   <form action="" method="post">
					   {% csrf_token %}
<body>
<div class="content">
	<li>文本分析</li>
	</div>

<div class="content">
	<input type="hidden" name="diffculty" value="0">
	<input type="checkbox" id="diffcult" class="hopen" name="diffculty" value="1">难度分级
	</div>


<div class="content">
	<div class="label-add" id="xinxitiqulabel" onClick="three('ps1',this)"> 信息提取
  <div class="ps1" id="xinxi" style="display:none">
	  <div class="label-add" onClick="two('fenlei',this)">分类标准
		  <div class="aps" id="fenlei" style="display:none">
		<input type="hidden" name="ticailb" value="0">
		<input type="checkbox" id="ticai" class="hopen" name="ticailb" value="1">体材类别<br/>
		<input type="hidden" name="zuozhelb" value="0">
		<input type="checkbox" id="zuozhe" class="hopen" name="zuozhelb" value="1">作者类别<br/>
		<input type="hidden" name="qingganlb" value="0">
		<input type="checkbox" id="qinggan" class="hopen" name="qingganlb" value="1">情感类别<br/>
		<input type="hidden" name="zhutilb" value="0">
		<input type="checkbox" id="zhuti" class="hopen" name="zhutilb" value="1">主题类别<br/>
		  </div>
		  </div>
		  </div>
	  <div class="ps1" id="xinxi" style="display:none">
	  <div id="gaoliang" class="label-add" onClick="three('gaoliang',this)">高亮信息
		  <div class="gaoliang" id="ciyuDiv1" style="display:none">
		<input type="hidden" name="ciyufl" value="0">
           <input type="checkbox" id="ciyu" class="hopen" name="ciyufl" value="1" onClick="this.value=check(ciyuDiv2,this)">词语
			<div class="gaoliang1" id="ciyuDiv2" style="display:block">
		<input type="hidden" name="shengzicifl" value="0">
		<input type="checkbox" id="shengzici" class="hopen" name="shengzicifl" value="1">生字词<br/>
		<input type="hidden" name="shijiangjcfl" value="0">
		<input type="checkbox" id="shijiangjc" class="hopen" name="shijiangjcfl" value="1">时间关键词<br/>
		<input type="hidden" name="kongjiangjcfl" value="0">
		<input type="checkbox" id="kongjiangjc" class="hopen" name="kongjiangjcfl" value="1">空间关键词<br/>
		<input type="hidden" name="wenzhanggpcfl" value="0">
		<input type="checkbox" id="wenzhanggpc" class="hopen" name="wenzhanggpcfl" value="1">文章高频词<br/>
		<input type="hidden" name="zhuyaorenwufl" value="0">
		<input type="checkbox" id="zhuyaorenwu" class="hopen" name="zhuyaorenwufl" value="1">主要人物<br/>
		<input type="hidden" name="qianglieganqingcifl" value="0">
		<input type="checkbox" id="qianglieganqingci" class="hopen" name="qianglieganqingcifl" value="1">强烈感情词<br/>
		<input type="hidden" name="lianjiecifl" value="0">
		<input type="checkbox" id="lianjieci" class="hopen" name="lianjiecifl" value="1">连接词<br/>
		<input type="hidden" name="guanjiancifl" value="0">
		<input type="checkbox" id="guanjianci" class="hopen" name="guanjiancifl" value="1">关键词<br/>

		</div>
		</div>
		  <div class ="gaoliang" id="ciyuDiv3" style="display:none">
		<input type="hidden" name="juzifl" value="0">
           <input type="checkbox" id="juzi" class="hopen" name="juzifl" value="1" onClick="this.value=check(ciyuDiv4,this)">句子
			<div class="gaoliang1" id="ciyuDiv4" style="display:block">
		<input type="hidden" name="zongqijufl" value="0">
		<input type="checkbox" id="zongqiju" class="hopen" name="zongqijufl" value="1">总起句<br/>
		<input type="hidden" name="guodujufl" value="0">
		<input type="checkbox" id="guoduju" class="hopen" name="guodujufl" value="1">过渡句<br/>
		<input type="hidden" name="gaikuojufl" value="0">
		<input type="checkbox" id="gaikuoju" class="hopen" name="gaikuojufl" value="1">概括句<br/>
		<input type="hidden" name="teshujufl" value="0">
		<input type="checkbox" id="teshuju" class="hopen" name="teshujufl" value="1">特殊句<br/>
		
		</div>
		</div>
			</div>
			</div>
	<div class="ps1" id="xinxi" style="display:none">
	  <div id="gaoliang" class="label-add" onClick="three('xinxizongjie',this)">信息总结
		<div class="xinxizongjie" id="xinxiDiv1" style="display:none">
		<input type="hidden" name="quanwenzhaiyaofl" value="0">
		<input type="checkbox" id="quanwenzhaiyao" class="hopen" name="quanwenzhaiyaofl" value="1">全文摘要<br/>
		<input type="hidden" name="duanluozhaiyaofl" value="0">
		<input type="checkbox" id="duanluozhaiyao" class="hopen" name="duanluozhaiyaofl" value="1">段落摘要<br/>
		<div class ="hopen" id="xinxiDiv2" style="display:block">
		<input type="hidden" name="xiansuofl" value="0">
           <input type="checkbox" id="xiansuo" class="hopen" name="xiansuofl" value="1" onClick="this.value=check(xinxiDiv3,this)">线索
			<div class="xinxizongjie1" id="xinxiDiv3" style="display:block">
		<input type="hidden" name="shijianxianfl" value="0">
		<input type="checkbox" id="shijianxian" class="hopen" name="shijianxianfl" value="1">时间线<br/>
		<input type="hidden" name="kongjianxianfl" value="0">
		<input type="checkbox" id="kongjianxian" class="hopen" name="kongjianxianfl" value="1">空间线<br/>
		<input type="hidden" name="ganqingxianfl" value="0">
		<input type="checkbox" id="ganqingxian" class="hopen" name="ganqingxianfl" value="1">感情线<br/>
		   </div>
		   </div>
		   </div>
		   </div>
		   </div>
		   </div>
		   </div>

<div class="content">
  <div class="label-add" id="zukuaihuafenlabel" onClick="three('ps2',this)"> 组块划分
  <div class="ps2" id="xinxi" style="display:none">
	<input type="hidden" name="ciyuzkfl" value="0">
	<input type="checkbox" id="ciyuzk" class="hopen" name="ciyuzkfl" value="1">词语组块<br/>
	<input type="hidden" name="jzduanyuzkfl" value="0">
	<input type="checkbox" id="jzduanyuzk" class="hopen" name="jzduanyuzkfl" value="1">句中短语组块<br/>
	<input type="hidden" name="jzchengfenzkfl" value="0">
	<input type="checkbox" id="jzchengfenzk" class="hopen" name="jzchengfenzkfl" value="1">句中成分组块<br/>
	<input type="hidden" name="huatizkfl1" value="0">
	<input type="checkbox" id="huatizk" class="hopen" name="huatizkfl1" value="1">话题组块<br/>
	<input type="hidden" name="huatizkfl2" value="0">
	<input type="checkbox" id="huatizk" class="hopen" name="huatizkfl2" value="1">话题组块<br/>
		   </div>
		   </div>
		   </div>



<div class="content">
  <div class="label-add" id="wenzhangtuijianlabel" onClick="three('ps3',this)"> 文章推荐
  <div class="ps3" id="xinxi" style="display:none">
	<input type="hidden" name="zuozhefl" value="0">
	<input type="checkbox" id="zuozhe" class="hopen" name="zuozhefl" value="1">作者<br/>
	<input type="hidden" name="zhutifl" value="0">
	<input type="checkbox" id="zhuti" class="hopen" name="zhutifl" value="1">主题<br/>
	<input type="hidden" name="guanjianzifl" value="0">
	<input type="checkbox" id="guanjianzi" class="hopen" name="guanjianzifl" value="1">关键字<br/>
	<input type="hidden" name="shitifl" value="0">
	<input type="checkbox" id="shiti" class="hopen" name="shitifl" value="1">实体<br/>
	<input type="hidden" name="nandudengjifl" value="0">
	<input type="checkbox" id="nandudengji" class="hopen" name="nandudengjifl" value="1">难度等级<br/>
	<input type="hidden" name="xiangsifl" value="0">
	<input type="checkbox" id="xiangsi" class="hopen" name="xiangsifl" value="1">相似内容<br/>

		   </div>
		   </div>
		   </div>


<div class="content">
	<input type="submit" value="Submit">

</form>

<script language="javascript" type="text/javascript">
function check(field,obj) {
	var div=field;
	var ckb=document.getElementsByTagName("INPUT");
	if(obj.checked)
	{
		for(i=0;i<ckb.length;i++)
		{
			if(ckb[i].parentNode==div  && ckb[i].type=="checkbox")
				ckb[i].checked=true;
		}
	}
	else
	{
		for(i=0;i<ckb.length;i++)
		{
			if(ckb[i].parentNode==div  && ckb[i].type=="checkbox")
				ckb[i].checked=false;
		}
	}
}




$("div").click(function(){
	    event.stopPropagation();
})
function two(id,thisn)
{

event.stopPropagation();

  var object=document.getElementById(id);
if(thisn.className=="label-reduce"){

	console.log(thisn.id)
	thisn.className="label-add";
	}
else if(thisn.className=="label-add"){

	console.log(thisn.id)
	thisn.className="label-reduce";
	}

  if(object.style.display=="block" || object.style.display=="")
  {
     object.style.display="none";
     var ob2=document.getElementById('s'+id);
  }
  else
  {
    object.style.display="block";
    var ob2=document.getElementById('s'+id);
  }
}
function three(classn,thisn)
{

	var thisId = thisn.id
event.stopPropagation();
if(thisn.className=="label-reduce"){

	console.log(thisn.id)
	thisn.className="label-add";
	}
else if(thisn.className=="label-add"){

	console.log(thisn.id)
	thisn.className="label-reduce";
	}
  var object=document.getElementsByClassName(classn); 
for(i=0;i<object.length;i++)
  if(object[i].style.display=="block")
  {
     object[i].style.display="none";
  }
  else
  {
    object[i].style.display="block";
  }

}
</script>
</body>
</html>

Q.E.D.

Mofan Duan

【水蓝石】 html+jquery+css+django 菜单多级带图标变换隐藏展开，同类选择框选中与否都能回值，以及django反爬虫中间件

更理解div是种内容横着排，div之间竖着排的东西了

更理解div是一个容器，下面的东西就是内包的元素

更理解css和js，以及js和jquery设置的不同了

知道了可以全局设置所有同标签的怎样，也可以直接找class（css）和id（js，jquery）

知道了表单和checkbox，同name的checkbox都不选中就提交会报错，一般弄一个hidden的隐藏域来做辅助

知道了点击收缩展开其实就是，点击onClick连接到js，把要改display的id传过去，写个if else，改display就可以了

知道了冒泡事件，以及怎么终止

知道了多个触发事件同时放在一个div或什么里时，最好将其中几个放在function里，这样能规范顺序，也能解决莫名的bug

关于那个图标，就是知道了css里面的after和before其实就是出现在div的最开头和最末尾的地方而已，没啥东西。点击展开收缩改那个图标其实都靠的点击onClick触发事件函数中，更改css的样子。content,before就是改前面的图标

django中间件我也不是很懂，反正就给个网址呗https://blog.csdn.net/kuanggudejimo/article/details/104041361?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_utm_term-1&spm=1001.2101.3001.4242

css有个设置是padding-left的属性，就是左边留白。注意，这个留白会陷入那个div的套嵌，子元素自动留了父元素的白了。

那个点击一个东西，下面input全部选中的，其实就是找到下面所有input的id列表，循环访问，一个个改成需要的

效果图

源代码放在这里

【水蓝石】 WSL下的python font相关操作

【技术博客】拒绝强制刷网课的流氓操作，自己的电脑自己做主,对video更深度的理解，进行加速和进度条拖动设置

现象

Comments | 0 条评论

Mofan Duan

更理解div是种内容横着排，div之间竖着排的东西了

更理解div是一个容器，下面的东西就是内包的元素

更理解css和js，以及js和jquery设置的不同了

知道了可以全局设置所有同标签的怎样，也可以直接找class（css）和id（js，jquery）

知道了表单和checkbox，同name的checkbox都不选中就提交会报错，一般弄一个hidden的隐藏域来做辅助

知道了点击收缩展开其实就是，点击onClick连接到js，把要改display的id传过去，写个if else，改display就可以了

知道了冒泡事件，以及怎么终止

知道了多个触发事件同时放在一个div或什么里时，最好将其中几个放在function里，这样能规范顺序，也能解决莫名的bug

关于那个图标，就是知道了css里面的after和before其实就是出现在div的最开头和最末尾的地方而已，没啥东西。 点击展开收缩改那个图标其实都靠的点击onClick触发事件函数中，更改css的样子。content,before就是改前面的图标

django中间件我也不是很懂，反正就给个网址呗https://blog.csdn.net/kuanggudejimo/article/details/104041361?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_utm_term-1&spm=1001.2101.3001.4242

css有个设置是padding-left的属性，就是左边留白。注意，这个留白会陷入那个div的套嵌，子元素自动留了父元素的白了。

那个点击一个东西，下面input全部选中的，其实就是找到下面所有input的id列表，循环访问，一个个改成需要的

效果图

源代码放在这里

【水蓝石】 WSL下的python font相关操作

【技术博客】 拒绝强制刷网课的流氓操作，自己的电脑自己做主,对video更深度的理解，进行加速和进度条拖动设置

现象

Comments | 0 条评论

关于那个图标，就是知道了css里面的after和before其实就是出现在div的最开头和最末尾的地方而已，没啥东西。点击展开收缩改那个图标其实都靠的点击onClick触发事件函数中，更改css的样子。content,before就是改前面的图标

【技术博客】拒绝强制刷网课的流氓操作，自己的电脑自己做主,对video更深度的理解，进行加速和进度条拖动设置