我的可折叠列表适用于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被打扰而其他浏览器都没有?