Dropdown menu won't close

Question

I tried this in a test page and it works fine.

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
     <li><a href="#">Separated link</a></li>
  </ul>
</div>

When any of the drop down menu item is clicked, the dropdown menu closes.

However, when I copy this to nav.html in a HotTowel project:

<div class="btn-group">
   <a class="btn btn-info" href="#">Home</a>
    <a class="btn btn-info" href="#/details">Details</a>
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
            Odd Pages <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right" role="menu">
            <li><a href="#/page1">Page 1</a></li>
            <li><a href="#/page3">Page 3</a></li>
            <li><a href="#/page5">Page 5</a></li>
            <li class="divider"></li>
            <li><a href="#">Page 9</a></li>
        </ul>
</div>

The dropdown menu won't close until I click somewhere on the web page.

What is wrong?

Answer 1

There must be some other javascript preventing the dropdown from closing. Here is a JSFiddle of the exact code you have posted and it works just fine.

<div class="btn-group">
  <a class="btn btn-info" href="#">Home</a>
  <a class="btn btn-info" href="#/details">Details</a>
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
     Odd Pages <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-right" role="menu">
     <li><a href="#/page1">Page 1</a></li>
     <li><a href="#/page3">Page 3</a></li>
     <li><a href="#/page5">Page 5</a></li>
     <li class="divider"></li>
     <li><a href="#">Page 9</a></li>
   </ul>
</div>

Dropdown Menu

Try eliminating any other javascript that might be conflicting with the bootstrap/jQuery js.

Answer 2

I have the same issue, apparently when durandal routes are used the dropdown menu doesn't close after clicking an item. The example 'SPAJumpStart' solution behaves the same.. John Papa 'fixed' this by binding the click event in stead of the href. In the end I added the following code in the viewAttached function in shell.js:

        $('ul.dropdown-menu', view).find('li').click(function () {
            // remove the 'open' class on the parent element 
            $(this).parents('.dropdown-menu').parent().removeClass('open');
        });