Question

我有一个由angularjs和bootstrap制作的网页，但不是ui-bootstrap。

有drop-down list和iframe。问题是当下拉列表打开时，单击iframe不会自动关闭下拉列表。

我跟着this answer并添加了以下内容：

$(window).on('blur',function() { $('.dropdown-toggle').parent().removeClass('open'); } );

现在，点击iframe会关闭下拉列表。但是，在关闭之后，单击下拉按钮将不会重新打开列表;我们必须点击除iframe之外的其他地方或点击下拉按钮一次，然后再次点击下拉按钮打开列表。

很抱歉，我无法在游乐场重现这个问题，但似乎是一个常见的问题，只有第二次点击才会打开一个下拉列表＆＃34;。我试图删除data-toggle="dropdown"，但它没有帮助。

有谁知道我可以尝试解决这个问题？

Answer 1

您可以使用

尝试更多“bootstrap”解决方案

$(window).on('blur',function() { 
  if($('.dropdown-toggle').parent().hasClass('open')){
    $(".dropdown-toggle").dropdown("toggle");
  }
});

这将关闭元素，如果打开，让下拉列表关闭，以便下一次点击触发打开。

Answer 2

我终于明白了......

之前，我使用了以下内容，并没有使用bootstrap.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>.

为避免此问题中提到的问题，我需要使用：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>

请注意，bootstrap.js是绝对必要的，0.11.0对ui-bootstrap-tpls.js来说还不够。

（*顺便说一句，我之前有过一个错误（遗憾的是我记得不清楚），这是由于版本ui-bootstrap-tpls.js不够高。真的需要记住{{1}当你遇到棘手的js bug时可能会出现问题。*）

无法通过单击重新打开下拉列表

2 个答案: