阻止javascript关闭打开的折叠列表

stop javascript from closing an open collapsed list

本文关键字：折叠 列表 javascript 阻止      更新时间：2024-03-04

下面有一个简单的java脚本，可以打开和关闭一个可折叠的列表。列表中有链接，当您单击打开新窗口的链接时，列表会折叠。我想在点击这样的链接时保持列表打开。

Java脚本

function dropDown(li) {
var submenu = li.getElementsByTagName('ul')[0];
var x = "de" + li.id;
if (submenu) {
    submenu.style.display = submenu.style.display == "block" ? "" : "block";
}
if (document.getElementById(x).getAttribute('src') == "plus.gif") {
    document.getElementById(x).src = "minus.gif";
} else if (document.getElementById(x).getAttribute('src') == "minus.gif") {
    document.getElementById(x).src = "plus.gif";
}

}

我的HTML

<ul class="doclist">
<li onClick="dropDown(this);" id="1"> <a><image src="plus.gif" width="10" id="de1">&nbsp;<b>My Reports</b></a>
    <ul>
        <li>&nbsp;&nbsp;&nbsp;
            <A HREF="report1.pdf" TARGET="new"><B>Report 1</B></A></li>      
   </ul>
 </li>
 <P>
 <li onClick="dropDown(this);" id="2">
  <a><image src="plus.gif" width="10" id="de2">&nbsp;<b>Other Reports</b></a>
            <ul>
                <li>&nbsp;&nbsp;&nbsp;
                    <A HREF="report20.pdf" TARGET="new"><B>Report 20</B></A></li>
    <li>&nbsp;&nbsp;&nbsp;<A HREF="report21.pdf" TARGET="new"><B>Report 21</B></A></li>
   </ul>
 </li>  
</ul>

我的CSS

ul.doclist li ul {
  display: none;
}

jsfiddle上的示例-https://jsfiddle.net/cb49747/ka13kyee/

答案是将其添加到列表中的每个链接中。

onClick="event.stopPropagation();"

所以链接现在看起来是这样的。

<A HREF="report20.pdf" TARGET="new" onClick="event.stopPropagation();"><B>Report 20</B></A>

感谢普鲁斯，他让我走上了正轨。另一个注意事项是，这只适用于W3C兼容的浏览器。另一种选择是使用它。

event.cancelBubble = true;

但请注意，这还没有经过测试。

相关文章：