为什么我的Bootstrap 3.1.1'Collapse'元素会自动关闭？

Question

I've been having trouble with my mobile menu/navbar. I created a 'Sign in' button that drops down with a log in form using collapse.js that's provided by Bootstrap. My div pulls down and collapses perfectly. However, for whatever reason it automatically collapses back up whenever you click on the username or password text box fields. Any idea why this is happening?

Here's a link to the jsfiddle to demonstrate this issue: http://jsfiddle.net/65KdX/2/

Here is the section of code that is for the navbar:

<!-- Begin Navbar items -->
      <div class = "collapse navbar-collapse" id = "mainNavbarInfo">
        <ul class = "nav navbar-nav navbar-right">
          <li class = "active"><a href = "#"><span class = "glyphicon glyphicon-home"></span> Home </a> </li>
          <li><a href = "#"><span class = "glyphicon glyphicon-list-alt"></span> SLO Generator </a> </li>
          <li><a href = "#"><span class = "glyphicon glyphicon-question-sign"></span> SLO Tutorial </a> </li>
          <li><a href = "#"><span class = "glyphicon glyphicon-cloud-upload"></span> Sign Up  </a></li>

          <li data-toggle = "collapse" data-target = "#signInFormCollapseMobile" class = "visible-xs">
            <a href = "#"><span class = "glyphicon glyphicon-share-alt"></span> Sign In<div class = "collapse signInFormCollapse" id = "signInFormCollapseMobile" style = "position: relative;"></a>
              <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8" id = "signInFormMobile">
                  <input id="user_username" style="margin-bottom: 15px; margin-top: 10px;" type="text" name="user[username]" size="30" placeholder = "Username"/>
                  <br><input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" placeholder = "Password"/>
                  <br><input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                  <label class="string optional" for="user_remember_me"> Remember me</label>

                  <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px; margin-bottom: 10px;" type="submit" name="commit" value="Sign In" />
              </form>
            </div>
          </li>
       </ul>

      </div>

Answer 1

The problem is that your form is nested within that <li> block.

If you move the div that contains the form outside the <ul> section, it works fine.

See this updated jsfiddle .