Question

我在下面有一个简单的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/

Answer 1

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

onClick="event.stopPropagation();"

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

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

感谢prusse让我在事件冒泡的情况下走上正轨。另一个注意事项是，这只适用于符合W3C标准的浏览器。另一种选择是使用它。

event.cancelBubble = true;

但请注意，尚未经过测试。

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

1 个答案: