如何实现点击h1使dl显示或隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/main.css">
<title>作品列表</title>
</head>
<body>
<div class="content">
<ol class="list" id="ol">
<li>
<h1>
<a href="">表单常用代码</a>
</h1>
<dl>
<dd>
<a href="form/detach_space/derach_space.html" target="_blank">去除字符串的空格</a>
</dd>
<dd>
<a href="form/verify/verify.html" target="_blank">验证用户是否输入</a>
</dd>
<dd>
<a href="form/inhibit_input/inhibit_input.html" target="_blank">禁止用户输入</a>
</dd>
<dd>
<a href="form/close_imemode/close_imemode.html" target="_blank">关闭用户使用输入法</a>
</dd>
<dd>
<a href="form/inhibit_copy_pase/inhibit_copy_pase.html" target="_blank">禁止复制粘贴</a>
</dd>
<dd>
<a href="form/only_input_number/only_input_number.html" target="_blank">只能输入数字</a>
</dd>
<dd>
<a href="form/limit_string_length/limit_string_length.html" target="_blank">限制字符串长度</a>
</dd>
<dd>
<a href="form/prompt_num/prompt_num.html" target="_blank">提示剩余字数</a>
</dd>
<dd>
<a href="form/text_rolling/text_rolling.html" target="_blank">文字自动滚动</a>
</dd>
<dd>
<a href="form/enter_submit_form/enter_submit_form.html" target="_blank">enter提交表单</a>
</dd>
<dd>
<a href="form/keyword_filter/keyword_filter.html" target="_blank">过滤敏感字</a>
</dd>
<dd>
<a href="form/all_choose/all_choose.html" target="_blank">全选选项</a>
</dd>
<dd>
<a href="form/operation_dropdown_menu/operation_dropdown_menu.html" target="_blank">添加删除下拉选项</a>
</dd>
<dd>
<a href="form/cascading_dropdown_option/cascading_dropdown_option.html" target="_blank">级联菜单</a>
</dd>
<dd>
<a href="form/enter_add_option/enter_add_option.html" target="_blank">回车添加下拉选项</a>
</dd>
</dl>
</li>
<li>
<h1>
<a href="">常用图片相关代码</a>
</h1>
<dl>
<dd>
<a href="picture/picture_magnifier/enlarge.html" target="_blank">图片放大镜</a>
</dd>
</dl>
</li>
<li>
<h1>
<a href="">内容展示代码</a>
</h1>
<dl>
<dd>
<a href="content_exhibition/hover_prompt/prompt.html" target="_blank">单行鼠标悬停提示</a>
</dd>
</dl>
</li>
</ol>
</div>
<script src="style/main.js"></script>
</body>
</html>
main.js文件
(function (){
var ol = document.getElementById('ol');
var h1s = document.querySelectorAll('h1');
var dls = document.querySelectorAll('dl');
for(i=0;i < h1s.length;i++){
h1s[i].index = i;
h1s[i].onclick = function(){
var index = this.index;
dls[index].style.display = dls[index].style.display ==='block' ? 'none' : 'block';
for (var k = 0; k < ps.length; k++) {
if (k === index) {
continue;
}
dls[k].style.display = "none";
}
};
}
})();
maturity_process1回答
-
CodeManDSH
你的代码好像可以啊，只不过click事件被<a>的 href 掩盖了<a href="javascript:;">表单常用代码</a>改成这样子，或者<a>去掉就可以了
随时随地看视频慕课网APP
相关分类
JavaScript