阻止传播无法使用Firefox

时间:2015-10-26 13:30:58

标签: javascript firefox

我的可折叠列表适用于IE 11,Chrome 46,Opera 32和Safari,但不适用于Firefox 40。

期望的功能:

点击第一个项目(=国家/地区)时,下面隐藏的ul将会显示。 ul包含至少一个可以包含隐藏ul的li,依此类推。当它们变得可见时单击它们将使整个分支看起来像这样:

首次点击之前:

...
Mexico
...

首次点击后

...
Mexico
    Chichen-Itza
...

点击" Chichen-Itza"

...
Mexico
    Chichen-Itza
        Doe, John
...

点击" Doe,John"将在另一个div中加载个人数据,并且可折叠列表不受影响。

除了Firefox之外,每个浏览器都可以正常工作,尽管我努力阻止传播,但传播(?)仍在继续。在Firefox中会发生这种情况:

首次点击之前:

...
Mexico
...

首次点击后

...
Mexico
    Chichen-Itza
...

点击" Chichen-Itza"

...
Mexico
...

"传播"再次点击了第一个项目,从而关闭了它。如果我点击"墨西哥"我再一次得到:

...
Mexico
    Chichen-Itza
        Doe, John
...

所以我的结论是,除了第一项收到的额外点击之外,一切正常。我一直试图找到这个问题的答案,但失败了,我的javascript技能有限。

这是我的代码:
HTML:

<ul class="CL">
    ...
    <li class=" CLclosed" id="li_40" onclick="CLtoggle ('li_40', 'ul_40');"><label>Mexico</label>
        <ul class="CL" id="ul_40" style="display: none;">
            <li class=" CLclosed" id="li_41" onclick="CLtoggle('li_41', 'ul_41');"><label>Chichen-Itza</label>
                <ul id="ul_41" style="display: none;">
                    <li><a onclick="get('indi.php?xid=4857','text_pd')"> Doe, John </a></li>
                </ul>
            </li>
        </ul>
    </li>
    ...
</ul>

使用Javascript:

function CLtoggle(li_x,ul_x) {
    var li = document.getElementById(li_x);
    var open = li.className.match(/(^| )CLclosed( |$)/);
    li.className = li.className.replace(/(^| )CL(open|closed)( |$)/, '');
    li.className += ' CL' + (open ? 'open' : 'closed');
    var ul = document.getElementById(ul_x);
    ul.style.display = (open ? 'block' : 'none');
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

为什么只有Firefox被打扰而其他浏览器都没有?

0 个答案:

没有答案