猿问

如何实现点击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_process
浏览 1431回答 1
1回答

CodeManDSH

你的代码好像可以啊,只不过click事件被<a>的 href 掩盖了<a href="javascript:;">表单常用代码</a>改成这样子,或者<a>去掉就可以了
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答