2 lv qinyu lv_qinyu 于 2016.09.12 21:59 提问

一个关于js做的层次列表,有一点点问题,请大家帮忙看一下,谢谢啦

使用js做的一个列表层次,在点击加号后,列表展开,里面有好几个选项,但是点击选项之后,列表就自动关闭了,不知道我哪里的属相设置的有问题,以下是我的js的代码

 <script type="text/javascript">
    window.onload=setfunction;
    function setfunction(){
        var lis=document.getElementsByTagName("li");
        for(var i=0;i<lis.length;i++){
            if(lis[i].className=="open"){
                lis[i].onmouseup=handlemouseup;
            }
        }
    }
    function handlemouseup(){
        var state;
        if(this.className=="open"){
            this.className="close";
            state="block";
        }
        else if(this.className=="close"){
            this.className="open";
            state="none";
        }
        var ulobj=this.getElementsByTagName("ul");
        ulobj[0].style.display=state;
    }
    </script>

列表是的层次是这样的

 <ul>
   <li>   
        <ul>
          <li></li>
           <li></li>
           <li></li>
       </ul>
   </li>
<li>   
        <ul>
          <li></li>
           <li></li>
           <li></li>
       </ul>
   </li>
</ul>

但是结果在执行的时候就成了不管点列表里面的哪一个,列表都会关闭,不知道有没有懂的人帮忙看一下问题,谢谢大家啦~~

4个回答

zhuzige521888
zhuzige521888   2016.09.12 22:28
已采纳

事件冒泡的原因,因为你的设置了父节点onmouseup,子节点虽然没有这个事件,但是点击子节点时,事件冒泡,会执行父节点的相同事件,阻止事件冒泡就好了。
function stopBubble(e)

{

if (e && e.stopPropagation)

e.stopPropagation()

else
window.event.cancelBubble=true
}

把这个stopBubble(e)函数放到你想要的阻止事件冒泡函数里面就可以阻止事件冒泡了

lv_qinyu
lv_qinyu 不好意思,这个东西我这个初学js的不太会,请问能不能说的更详细点呢
接近 2 年之前 回复
lv_qinyu
lv_qinyu 回复一个程序猿子:这个是jq的?
接近 2 年之前 回复
zhuzige521888
zhuzige521888 如 $("#pp").click(function(e){ alert("我是pp!"); stopBubble(e); });
接近 2 年之前 回复
lv_qinyu
lv_qinyu 谢谢你,我试试,看行不行
接近 2 年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.12 22:08

没看代码,太乱了,问题应该是选择器选择的对象搞错了

lv_qinyu
lv_qinyu 谢谢,我粘上去没想到成了这样,我看看,是不是选择器出错
接近 2 年之前 回复
lv_qinyu
lv_qinyu   2016.09.12 22:10

谢谢,我粘上去没想到成了这样,我看看,是不是选择器出错

lv_qinyu
lv_qinyu 回复当作看不见:那个应该是tagname=="open"||tagname=="close"那一些没有粘上去
接近 2 年之前 回复
qq_29594393
qq_29594393 js逻辑错误,前面都判断是否tagname=="open",就他调用这个函数,那调用的函数下面的部分根本不会有可能被执行,
接近 2 年之前 回复
zhuzige521888
zhuzige521888   2016.09.13 10:50
=========给你写个完整代码吧,如果//stopBubble(e); 注掉就会弹出两个框框,如果没有注掉就只有pp那个框框。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>冒泡测试</title>
</head>
<body>
    <div id="dd">
        <div id="pp">clickme</div>
    </div>
    var pp = document.getElementById("pp");
    var dd = document.getElementById("dd");
    pp.onclick=function(e){ //给pp设置点击事件
            alert("我是pp!");
            //stopBubble(e); 
    };
    dd.onclick=function(e){ //给dd设置点击事件
            alert("我是dd!");
    };
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            e.stopPropagation()
        else 
            window.event.cancelBubble=true 
    }
    </script>
</body>
</html>
zhuzige521888
zhuzige521888 没事,昨天我都睡觉了,我以为你急成猴了呢
接近 2 年之前 回复
lv_qinyu
lv_qinyu 谢谢你,昨天晚上的网速太差了,导致消息一直发不出去,发出去就发了好多,不好意思哈
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
web.xml
web.xml文件,请帮忙看一下,谢谢!!!!
MD5方便大家学习
一起学习MD5,如果大家对该js有什么问题,请帮忙指正。谢谢
maven tomcat 服务器
顺得兄请帮忙看一下,顺得兄请帮忙看一下顺得兄请帮忙看一下顺得兄请帮忙看一下顺得兄请帮忙看一下顺得兄请帮忙看一下顺得兄请帮忙看一下顺得兄请帮忙看一下
TCP服务器(socket)
服务器以及客户端程序,不知道为什么连接不上~求助~请大家帮忙看一下问题出在了哪里,谢谢~
MATLAB提取矩阵中的一部分
     MATLAB对矩阵的操作十分灵活,下面对最近遇到的进行总结:    格式A(m,n),用于提取矩阵A中符合m,n要求的部分1、提取某个元素,则m,n为数字标量,如A(2,3)为第二行第三列的元素。2、提取某行某列      A(:,n)提取第n列的所有元素,如A(:,3)提取第三列的所有元素;      A(m,:)提取第m行的所有元素,如A(3,:)提取第三行的所有元素;3、提取任意的...
帮忙看一下。谢谢!
server: 1  #include     2  #include     3  #include     4  #include     5  #include     6  #include     7  #include     8  #include     9  #include    10  #include    11  int main()    12  {    13 
有内存泄露程序
这是一个有内存泄露的程序。请帮忙看一下内存泄露在什么地方。
求助打印预览的问题!
请帮忙解决,谢谢! 请帮忙解决,谢谢! 请帮忙解决,谢谢! 请帮忙解决,谢谢! 请帮忙解决,谢谢!
有个问题大家帮忙看一下
第一张: 第二张: 第三张: 我想请问一下,第一张图的list为什么没有值,第二张图的list2就有值了,第三张list也是有值的
首先谢谢大家的关注!
首先谢谢大家的关注! 谢谢大家! 谢谢大家!! 谢谢大家!!! 重要的事情要说好几遍~ 首先做个自我介绍吧 中文名字是乔浩磊  英文名字是feiyu~ 哈哈当个玩笑就好了~ 现就读于河南某高校 正在完成小时候的梦想——步入IT 行业 本人从小酷爱计算机,接触电脑时间比较早打过无数游戏用过无数电脑系统当然~~也玩坏过无数次系统 想在大学期间利用空闲时间积