自定義下拉

Question

我試圖創建一個自定義下拉，並使用下面的代碼工作得很好 - 只有一個問題是，如果我有多個下拉，所有鏈接只會激活第一個下拉。任何想法，我會如何解決這個問題？ （是的，我知道口魚我只需要得到這個工作）

function toggle() { 
var ele = document.getElementById("dropdown-items"); 
var text = document.getElementById("dropdown-menu"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    } 
else { 
    ele.style.display = "block"; 
} 
} 

HTML如下：

<div id="mainSearch"> 
      <div id="search-cat"> 
       <div class="search-title">Destination</div> 
        <div id="cat-dropdown"> 
        <a id="dropdown-menu" href="javascript:toggle();">Choose a Category...</a> 
        <div id="dropdown-items"> 
         <ul>   
           <li id="dropdown-list"><a href="">Category One</a></li> 
           <li id="dropdown-list"><a href="">Category Two</a></li> 
           <li id="dropdown-list"><a href="">Category Three</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 

      <div id="search-cat"> 
       <div class="search-title">Location</div> 
        <div id="cat-dropdown"> 
        <a id="dropdown-menu" href="javascript:toggle();">Choose a Location...</a> 
        <div id="dropdown-items"> 
         <ul>   
           <li id="dropdown-list"><a href="">Category One</a></li> 
           <li id="dropdown-list"><a href="">Category Two</a></li> 
           <li id="dropdown-list"><a href="">Category Three</a></li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 

Answer 1

有你的功能需要一個ID，並在元素ID傳爲特定菜單：

function toggle(menuId) { 
var ele = document.getElementById(menuId); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    } 
else { 
    ele.style.display = "block"; 
} 
} 

這樣你就可以使用每個菜單不同的ID並單獨引用各一個。

編輯

你不要在這裏需要太多不同的JavaScript。對於每一個下拉菜單，你只需要稍微改變的href：

<a id="dropdown-menu1" href="javascript:toggle('dropdown-menu1');">Choose a Category...</a> 

<a id="dropdown-menu2" href="javascript:toggle('dropdown-menu2');">Choose a Category...</a> 

調用toggle與菜單的id是指由上述修改toggle功能將切換你想要的確切菜單。

Answer 2

使切換功能接受ID作爲參數，那麼你可以使用切換功能爲所有項目。

function toggle(var1) { var ele = document.getElementById(var1);

Answer 3

我猜這是因爲你的ID引用下拉，我猜你所有的ID都是一樣的嗎？

HTML spec表示元素的ID屬性需要是唯一的，這可能是您遇到問題的原因。

如果你想有一個更簡潔的答案:)請張貼一些HTML

如果你要調整你的功能，使該元素的ID可以，因爲這將解決您的問題一個參數傳遞。

Answer 4

您可以通過ID訪問您的下拉菜單，並且ID應該在HTML頁面中是唯一的。沒有更多的信息，我的猜測是你的問題在這裏。