Question

我复制了这个菜单：

http://50.112.96.159/wordpress/html/facebook_dropdown.html

一切正常，但我有疑问。

我希望有多个菜单，例如：

<dl style="" class="dropdown">
                   <dt><a id="linkglobal" style="cursor:pointer;"></a></dt>
                    <dd>
                        <ul id="ulglobal">
                            <li><a href="#">Everyone</a></li>
                            <li><a href="#">Friends</a></li>
                            <li><a href="#">Only Me</a></li>
                            <li><a href="#">Customize</a></li>
                      </ul>
                   </dd>
                </dl>

<dl style="" class="dropdown">
                   <dt><a id="linkglobal" style="cursor:pointer;"></a></dt>
                    <dd>
                        <ul id="ulglobal">
                            <li><a href="#">Everyone</a></li>
                            <li><a href="#">Friends</a></li>
                            <li><a href="#">Only Me</a></li>
                            <li><a href="#">Customize</a></li>
                      </ul>
                   </dd>
                </dl>

当我将#id设置为<dt>时，菜单无效，我认为是因为javascript。

有人可以帮我这个吗？

谢谢！

Answer 1

您提供的示例网址包含具有唯一ID的A和UL元素，但两个菜单的ID相同。浏览器将允许文档中的重复ID，但应该避免出于某些原因 - 但其中一个原因是JavaScript将按预期工作（具有多个ID，getElementById（）返回的元素不受保证）。

Answer 2

好的 - 所以如果你想设置两个不同的图像 - 我假设你在谈论privacyOff＆amp; amp; privacyOn图像你需要像其他人建议的那样通过首先拥有唯一ID来改变你的html，然后改变你的css来给你想要那些id的图像，所以像这样：

HTML：

`<dt><a id="linkglobal" style="cursor:pointer;"></a>  ...</dt>`

变为

`<dt><a id="linkglobalOne" style="cursor:pointer;"></a>  ...</dt>`

和css：

.dropdown dt a {background:#EEEEEE url(/wordpress/images/privacyOff.png) no-repeat scroll right center;
display:block; width:40px; height:22px; cursor:pointer;}

变为：

#linkglobalOne {background:#EEEEEE url(<IMAGE YOU WANT>.png) no-repeat scroll right center;
display:block; width:40px; height:22px; cursor:pointer;}

下拉菜单，添加更多ID

2 个答案: