下拉菜單，添加更多的id

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，但應該避免出於幾個原因 - 但其中之一是JavaScript將按預期工作（使用多個ID，getElementById（）返回的元素不保證）。

Answer 2

好了 - 所以，如果你想設置兩個不同的圖像 - 我認爲你是在談論privacyOff你需要改變你的HTML作爲他人通過首先具有唯一ID的建議，然後改變你的CSS給& privacyOn圖片您希望將這些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;}