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

时间:2015-01-11 15:59:08

标签: javascript html

我正在开发一个网站,我遇到的问题是通过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指的是来自bootstrap网站的单独文件。

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

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

谢谢。

1 个答案:

答案 0 :(得分:2)

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

看看是否有效。