无法一键重新打开下拉列表

Posted 2023-05-08

【中文标题】无法一键重新打开下拉列表

【英文标题】：Cannot re-open the drop-down list by one click

【发布时间】：2017-09-15 01:54:38

【问题描述】：

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

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

我关注了this answer并添加了以下内容：

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

现在，点击 iframe 会关闭下拉列表。但是，关闭后，单击下拉按钮不会重新打开列表；我们必须单击 iframe 以外的其他位置或单击下拉按钮一次，然后再次单击下拉按钮打开列表。

抱歉，我无法在操场上重现该问题，但“仅第二次单击打开下拉列表”似乎是一个常见问题。我试图删除data-toggle="dropdown"，但没有帮助。

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

【问题讨论】：

这可能是因为您需要在再次触摸下拉菜单之前获得外部页面焦点。如果我正确理解问题。但是一个尝试的想法是将下拉列表包装在 ng-if 中，当单击 iframe 时，将 if 语句切换为关闭状态，然后将下拉列表重新呈现为其自然状态。

我同意“您需要在再次触摸下拉菜单之前先获得外部页面焦点”，因为即使我们多次单击 iframe 区域，我们也必须在单击下拉菜单之前单击其他位置-down 按钮重新打开它。但是，我不明白你说的ng-if...

忘记 ng-如果我认为它没有帮助的话。更多使用 jqlite 的替代方法

我不知道jqlite，你能提出一个答案吗？

@SoftTimur 你能提供更多代码吗？因为it works in jsfiddle

【参考方案1】：

您可以尝试使用更“引导”的解决方案

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

如果打开元素，这将关闭元素，并让下拉菜单关闭，以便下次单击以触发打开。

【讨论】：

有了这段代码，当我点击iframe时，下拉列表不会自动关闭...

【参考方案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 来说是不够的。

(* 对了，我之前有个bug（可惜我记不太清楚了），是因为版本不够高ui-bootstrap-tpls.js。确实需要记住ui-bootstrap-tpls.js可能是遇到棘手的 js bug 时的问题。*)

【讨论】：

这是第一句话：我有一个由angularjs和bootstrap制作的网页，但不是ui-bootstrap。我也想知道你的代码如何在操场上工作。