Jquery 单击表单切换时登录/注销

在此演示的基础上：

我正在构建一个登录/注销onclick表单：

用户名
密码

我很难确定为什么它在第一次提交时的行为与在随后的登录/注销时的行为不同。在Chrome和IE（但不是Firefox）中，登录提交按钮在第一次尝试时提交两次切换，但之后切换正确

我在控制切换箭头和活动类时也遇到了一些问题

---

有人能帮我解决这个问题吗？

我找到了一个解决办法。。。我在这里分享，以防其他人感兴趣

<div id="who">
  <ul>
    <li id="login">
      <a id="login-trigger" href="#">
        Log in <span>&#x25BC;</span>
      </a>
      <div id="login-content">
        <form id="loginform">
          <fieldset id="inputs">
            <label for="username">Username</label>
            <input id="username" type="text" autofocus placeholder="Your username" required>
            <label for="password">Password</label>   
            <input id="password" type="password" placeholder="Your password" required>
          </fieldset>
         <fieldset id="actions">
            <input type="submit" id="insubmit" value="Log in"  class="logit">
            <input type="button" id="incancel" value="Cancel"  class="forgetit">
            <!-- <label><input type="checkbox" checked="checked"> Keep me signed in</label> -->
          </fieldset>
         </form>
      </div>                     
    </li>
    <li id="logout">
      <a id="logout-trigger" href="#">
        Log out <span>&#x25BC;</span>
      </a>
      <div id="logout-content">
        <form id="logoutform">
         <fieldset id="actions">
            <input id="name" type="text" value="Firstname Lastname (username)" readonly>
            <input type="submit" id="outsubmit" value="Log out" class="logit">
            <input type="reset" id="outcancel" value="Cancel"  class="forgetit">
            <!-- <label><input type="checkbox" checked="checked"> Keep me signed in</label> -->
          </fieldset>
         </form>
      </div>                     
    </li>
  </ul>
</div>

        $(document).ready(function() {
          $('#login-trigger').click(function(){
            $(this).next('#login-content').slideToggle();
            $(this).toggleClass('active');                          
            if ($(this).hasClass('active')) $(this).find('span').html('▲')
              else $(this).find('span').html('▼')
            });
          $('#logout-trigger').click(function(){
            $(this).next('#logout-content').slideToggle();
            $(this).toggleClass('active');                          
            if ($(this).hasClass('active')) $(this).find('span').html('▲')
              else $(this).find('span').html('▼')
            }); 
            $('#loginform').submit(function(e) {
                e.preventDefault();
                $('#login, #logout').toggle();
                $('#loginform').find('input:text').val('');
                $('#loginform').find('input:password').val('');
            });
            $('#logoutform').submit(function(e) {
                e.preventDefault();
                $('#login, #logout').toggle();
                $('#login-content').hide();
                $('#login-trigger').toggleClass('active');                          
                $('#login-trigger').find('span').html('▼');                 
            }); 
            $('#incancel').click(function(){
                $(':input','#loginform')
                    .not(':button, :submit, :reset, :hidden')
                    .val('');
                $('#login-content').slideToggle();
                $('#login-trigger').toggleClass('active');                          
                $('#login-trigger').find('span').html('▼');
            });
            $('#outcancel').click(function(){
                $(':input','#loginform')
                    .not(':button, :submit, :reset, :hidden')
                    .val('');
                $('#logout-content').slideToggle();
                $('#logout-trigger').toggleClass('active'); 
                $('#logout-trigger').find('span').html('▼');                                         
            });                             
        });