javascript-为什么点击后隐藏的div未出现，也未实现点击下面的内容上面的内容自动关闭？

想实现点击“点击1”、“点击2”、“点击3”时，其下方的隐藏div显现；此外，当点击“点击2”时，“点击1”下方的隐藏内容自动消失，以此类推。。
当前问题是点击后无反应，如图。图片描述
代码错在哪里？能提示下或者改下吗？？
谢谢！

代码如下：

<!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-equip="Content-Type" content="text/html" charset="UTF-8"/>
    <title>测试点击下拉顺延</title>
<style>
 .show    {
    clear:both;
    width:400px;
    height:32px;
    border:1px solid;
    display:none
    }
.block    {
    clear:both;
    width:400px;
    height:58px;
    border:1px solid;
    }
</style>
<script>
function pop(oDiv){
var a=['D1','D2''D3']

for (var i=0;i<a;i++;)
{
if(oDiv==a[i]
{
var ob=document.getElementById(a[i]);
ob.style.display='block';
}
else
 {
var ob=document.getElementById(a[i]);
ob.style.display='none'};
}
}
</script>
</head>
<body>

<div ><a href="#" onclick="pop(oDiv)">点击1</a></div>
<div class="show" id="D1" >555</div>
<div class="block"></div>
<div ><a href="#" onclick="pop(oDiv)">点击2</a></div>
<div class="show" id="D2" >555</div>
<div class="block"></div>
<div ><a href="#" onclick="pop(oDiv)">点击3</a></div>
<div class="show" id="D3" >555</div>
<div class="block"></div>

</body>
</html>

javascript css html

html5

阅读 2k

3 个回答

得票最新

ars_qu

1.7k21229

发布于
2019-01-29

✓ 已被采纳

css
.slide_box {
  width: 400px;
}

html
   <div class="slide_box">
    <a href="#" onclick="pop(this)">点击1</a>
    <div class="show" id="D1">555</div>
    <div class="block"></div>
  </div>
  ...

js
function pop(btn) { //slide
      var el = ['D1', 'D2', 'D3'], pre = btn.parentNode;
      var ids = pre.children[1].getAttribute('id');
      for (var i = 0, ob; i < el.length; i++) {
        ob = document.getElementById(el[i]);
        if (ob)
          ob.style.display = (el[i] == ids) ?
            (ob.style.display == 'block' ? 'none' : 'block') :
            'none';
      }
    }

    document.addEventListener('click', function (e) { //判断点击元素
      e = e || window.event || event;
      var src = e.srcElement || e.target,
        res = findCls(src, 'slide_box');
      if (!res)
        hideSty('.slide_box .show');
    });

    function hideSty(cls) { //将指定class元素style置为 none
      cls = typeof cls != 'string' ? cls : document.querySelectorAll(cls);
      for (var i = 0; i < cls.length; i++) {
        cls[i].style.display = 'none';
      }
    }

    function findCls(el, cls) { //查询父级元素是否包含class
      var pre = el.parentNode;
      if (!cls || !el) { return false; }
      if (pre) {
        if (!pre.className) { return false; }
        while (pre.className.indexOf(cls) == -1) {
          pre = pre.parentNode;
          if (!pre.className) { return false; }
          if (pre.className.indexOf(cls) != -1) {
            return true;
          }
        }
        return true;
      }
    }