由于下拉脚本，动态下拉列表不起作用

Posted 2023-03-06

【中文标题】由于下拉脚本，动态下拉列表不起作用

【英文标题】：Dynamic Dropdown List not working because of dropdown script

【发布时间】：2012-12-24 09:39:28

【问题描述】：

这是我最初遇到的问题。 Bootstrap Responsive Navbar Problem

然后我得到了“wandarkaf”发布的解决方案。它工作得很好，解决了我的问题。

现在我的问题是，我的网站有一个动态下拉文件上传系统。它在本地主机上完美运行，但在网络服务器上却不行。我意识到，由于我为克服移动导航下拉问题而添加的下拉脚本，因此不会出现第二级和第三级的下拉菜单。删除它可以解决当前问题，但会导致先前的问题。而解决之前的问题，就会产生现在的问题。

我如何解决这两个问题并使事情顺利进行。

这是我的文件上传链接：Dynamic Dropdown File Upload

它应该像这样工作：Example 选择计算机科学工程选项！其他的都被我禁用了。

请帮助我克服这两个问题。谢谢你。

【问题讨论】：

您已经包含 bootstrap.js 两次（开发版和缩小版）。并且由于某种原因 clearMenus() 没有定义。

还包括 jquery 1.8.2 和 1.8.3....选择一个！

@shapeshifter：我添加了普通文件和最小文件。我猜他们有点不同？不太确定。是的，我像你说的那样删除了其中一个 jquery。并且由于在另一个***链接中发布的sn-p可能没有定义clearMenus（）？你能看看那个代码吗？也许你能理解，我玩了 30 分钟后无法尝试解决它

它们本质上是一样的，不过你只需要一个。我会在开发过程中包含未缩小的版本。

好的，我也会删除它。但这仍然没有解决或给出解决我的问题的丝毫提示。我用谷歌搜索了你所说的 clearmenu ，没有太多帮助。

【参考方案1】：

(window.jQuery);

$(function () 
  $('html').on('click.dropdown.data-api', clearMenus)
  $('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e)  e.stopPropagation() )
       .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
       .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
);

应该是，

$(function () 
  $('html').on('click.dropdown.data-api', clearMenus)
  $('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e)  e.stopPropagation() )
       .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
       .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
);

( window.jQuery );

【讨论】：

这在一定程度上解决了我的问题。事情是，我仍然有两个添加未缩小和缩小版本，省略其中一个并没有帮助。而且，下拉菜单在手机上也不起作用。

你两次声明同一个脚本是我的观点。就像为了好玩而编写两次函数一样。您不需要包含两个...您不应该包含两个。\

不可能是同一个脚本。

好的，这就是这个。我像你说的那样单独添加了未缩小的版本。但是移动问题出现了。单击导航栏中的下拉菜单时，我得到了两个选项，但单击其中一个会切换并关闭它。

哦，对了，你说的只是删除脚本并没有解决它。没有这样做是有道理的，因为您所做的只是两次定义脚本。至于移动问题，我猜这超出了这个问题的范围。

【参考方案2】：

好的，你们所有人。尽管变形者一直对我很有耐心，并尽其所能帮助我。这是另一个解决方案。

显然，最新版本的 Twitter Bootstrap 2.2.2 或其他版本存在问题。发生的情况是，当您使用引导下拉子菜单时，通过触摸设备触摸链接时，您不会被重定向到该链接，而是下拉列表或菜单只是切换回来并关闭。所以暂时，他们要求输入一些代码并修复它（就像上面的答案和 github 上的许多其他答案一样），但添加此代码有时可能会禁用您的正常下拉列表或给出其他问题。某些事情或其他事情总是出错，而且它也不适用于所有的触摸设备。在朋友的帮助下，我在 iPhone、Galaxies、Windows 手机、诺基亚等设备上亲自试用过。

所以在 GitHub 上浏览了很多类似的问题后，我发现他们中的许多人切换回 Twitter Bootstrap 版本 2.0.4，它完全没有问题，无论是下拉菜单还是触摸设备。这个版本的 boostrap.js 可以在所有设备上正常工作，而无需用户进行编辑或进行任何更改。

如果有人遇到类似的问题，我暂时给你解决了。 Bootstrap 开发人员正在研究它。如果你想要 2.0.4 版本，这里是链接： Twitter Bootstrap 2.0.4

谢谢大家！