javascript - 我无法在我的网站上添加两个下拉菜单，而其中一个不会干扰另一个

Question

我正在开发一个网站，但我遇到了一个通过 java 脚本运行的下拉菜单的问题，干扰了同一页面上的另一个菜单。

我使用的模板可以在 here 中找到(它是从bootstrap下载的)。

我想要的是，我有两个下拉菜单，但是当我这样做时，位于靠近代码顶部的那个可以正常工作，但是位于其下方的那个则有问题。基本上，当我运行网站时，最靠近顶部的下拉框工作正常，但是当我单击下面的下拉框时，它不会自行操作，而是打开其上方的下拉框。

一开始我以为是因为他们有相同的id所以我改变了它。但当我更改 id 时，它们根本都没有打开。

这是两个下拉菜单的代码:

                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-briefcase"></i> Support <i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="demo" class="collapse">
                        <li>
                            <a href="#">ProjectSend</a>
                        </li>
                        <li>
                            <a href="#">Email</a>
                        </li>
                         <li>
                            <a href="#">Live Chat</a>
                        </li>
                         <li>
                            <a href="../support/tickets/">Tickets</a>
                        </li>
                    </ul>
                </li> 



                <li>
                    <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-briefcase"></i> Developers <i class="fa fa-fw fa-caret-down"></i></a>
                    <ul id="demo" class="collapse">
                        <li>
                            <a href="#">ProjectSend</a>
                        </li>
                        <li>
                            <a href="#">Email</a>
                        </li>
                         <li>
                            <a href="#">Live Chat</a>
                        </li>
                         <li>
                            <a href="../support/tickets/">Tickets</a>
                        </li>
                    </ul>
                </li> 

JavaScript 指的是来自引导网站的单独文件。

我还删除了第二个 a href="javascript"，认为它会继续前一个，但这也不起作用，

我对 java 脚本比较陌生，并且有一些非常基本的 HTML 知识。

谢谢。

Answer 1

我认为你应该做的是给他们不同的ID并相应地改变目标。

看看是否有效。