Question

我正在尝试创建一个自定义下拉菜单并使用下面的代码它运行得很好 - 只有一个问题是如果我有多个下拉列表，所有链接将只激活第一个下拉列表。关于如何解决这个问题的任何想法？（是的，我知道Suckerfish我只需要让它工作）

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都是一样的？

HTML spec表示元素的ID属性必须是唯一的，这可能就是您遇到问题的原因。

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

如果你要调整你的功能，那么元素ID可以作为参数传递，这将解决你的问题。

Answer 2

让您的函数获取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功能将切换您想要的确切菜单。

Answer 3

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

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

Answer 4

您可以通过ID访问下拉列表，并且ID应该在HTML页面中是唯一的。没有更多信息，我猜你的问题就在这里。

自定义下拉列表

4 个答案: