使列表项可单击/执行弹出框的JS函数

Question

首先，对于这个问题的格式不正确，我深表歉意（我将发布JSFiddle链接）。

这是HTML：

         <nav>
          <ul>
            <li><a href="#">Climate Models</a>
                <ul>
                  <li><a href="#">GFDL</a></li>
                  <li><a href="#">CGCM3</a></li>
                  <li><a href="#">CCSM</a></li>
                </ul>
            </li>
              <li id="about"><a href="#">About Data</a></li>
               <li><a href="#">Contact US</a></li>
          </ul>
        </nav>
<div id="overlay"></div>
<div id="popupabout">
    <a href="#" Id="CloseBtn">X</a>
    <br>Data</br>
</div>

这是链接： http : //jsfiddle.net/n3fUV/3/

HTML代码包含一个带有下拉菜单的导航栏。 CSS包含菜单的样式以及我尝试合并的弹出框的一些样式（它还包含自定义样式按钮的CSS）。 JS包含我认为是正确的功能，可让我单击“关于我们”列表项并让其处理弹出框的打开和关闭。

我的问题是：是否可以使列表项可点击？ 如果有，我不知道如何利用它。 恐怕如果必须使它们成为元素才能使它起作用，我将不得不对导航栏重新进行所有样式设置。

很抱歉，如果我做的工作很糟糕，因为我一般对Web设计还是陌生的。 如果您不了解某些内容，我会尽力重新解释。 我将不胜感激。

Answer 1

代码正确无误，但您必须选择“无包裹”。 您可以在“ Frameworks＆Extensions”下找到它，在下拉框中选择“ onLoad”。

编辑您已经选择了“ onLoad”，因此不需要HTML下的这一行：

<body onload="initialize()">

并且不要设置window.onload函数。

JSFiddle: http://jsfiddle.net/n3fUV/6/