Javascript 自定义下拉列表

我正在尝试创建一个自定义下拉列表，并使用下面的代码，它工作得非常好-唯一的问题是，如果我有多个下拉列表，所有链接将只激活第一个下拉列表。有没有办法解决这个问题？（是的，我知道沙鱼，我只需要让它发挥作用）

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>

目的地





位置

使切换功能接受id作为参数，然后可以对所有项目使用切换功能

功能切换（var1）{
var ele=document.getElementById（var1）；

我猜这是因为您正在按ID引用下拉列表，而我猜您的所有ID都是相同的

声明元素的ID属性必须是唯一的，这可能是出现问题的原因

如果您想要更简洁的答案，请发布一点HTML：）

---

如果要调整函数，使元素ID可以作为参数传递，这将解决您的问题。

让函数获取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>

---

使用菜单id调用

toggle

意味着上述修改的

toggle

功能将切换您想要的确切菜单。

您可以通过id访问下拉列表，并且id在HTML页面中应该是唯一的。

---

如果没有更多的信息，我猜你的问题就在这里。

是的，它们都是一样的-html 2帖子。我从别人做的一个旧项目中借用了这段代码。无论如何，我可以改进它？是的，不要使用id。使用另一个选择器。@Rob，真的，你最好使用某种库。例如jQuery，但是还有其他的s、 html代码有错误，LIs都有相同的ID，这是被禁止的。明白了-现在我知道这里发生了什么！谢谢。

<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>