Cannot Re-open The Drop-down List By One Click

I have a webpage made by angularjs and bootstrap, but not ui-bootstrap. There is a drop-down list and an iframe. The problem is that when the drop-down list is open, clicking on th

Solution 1:

you can try a more "bootstrap" solution with

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

this will close the element if openned and let the dropdown as closed for the next click to fire the open.

Solution 2:

I finally got it...

Before, I used the following, and did NOT use bootstrap.js

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

To avoid the problem mentioned in this question, I need to use:

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

Note that, bootstrap.js is absolutely needed, and 0.11.0 is not enough for ui-bootstrap-tpls.js.

(* By the way, I had previously a bug (unfortunately I don't remember clearly), which was due to a not higher enough version ui-bootstrap-tpls.js. Really need to keep in mind that ui-bootstrap-tpls.js may be the issue when you meet a tricky js bug. *)