Popup-Fenster in Bootstrap nicht einwandfrei funktionieren

Question

ich ein Layout, wo auf einem Klick auf eine Schaltfläche ein Feld und auf Klick auf den gleichen Link soll die Box verschwindet

Mein vollständiger Code ist hier bei JS Fiddle

erscheinen soll

Das Problem ist, dass nach dem Öffnen der Box auf einen Klick auf einen Link, ich ändern Sie den Inhalt darin durch Klicken auf Login/registrieren, danach kann ich die Box nicht durch erneutes Klicken auf den Hauptlink, kann jemand sagen wie es geht

HTML CODE

<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Main Link</b> <span class="caret"></span></a> 
    <div id="demo" class="dropdown"> 
     <ul id="loginbtn" class="dropdown-menu"> 
      <li> 
       <form> 
        Login form 
       </form> 
       <a href="#" id="register">Register</a> 
      </li> 
     </ul> 

     <ul id="signupbtn" class="dropdown-menu"> 
      <li> 
       <form> 
        Register form 
       </form> 

       <a href="#" id="login">Login</a>   
      </li> 
     </ul> 
    </div> 

CSS

#signupbtn 
{ 
    display:none; 
} 

SCRIPT

$(document).ready(function(){ 
     $("#register").click(function(e){ 
      e.preventDefault(); 
      $('#loginbtn').hide(); 
      $('#signupbtn').show(); 
      return false; 
     }); 
    }); 

    $(document).ready(function(){ 
     $("#login").click(function(e){ 
      e.preventDefault(); 
      $('#loginbtn').show(); 
      $('#signupbtn').hide(); 
      return false; 
     }); 
    }); 

Answer 1

Eine Möglichkeit sollte stattdessen mit dem Einsatz von versteckter Klasse sein.

JsFiddle: https://jsfiddle.net/p1a0v6kj/

HTML:

<a href="#" class="login" data-toggle="dropdown" data-target="#demo"><b>Login</b> <span class="caret"></span></a> 
    <div id="demo" class="dropdown"> 
     <ul id="loginbtn" class="dropdown-menu"> 
      <li> 
       <form> 
        Login form 
       </form> 
       <a href="#" id="register">Register</a> 
      </li> 
     </ul> 

     <ul id="signupbtn" class="dropdown-menu hidden"> 
      <li> 
       <form> 
        Register form 
       </form> 

       <a href="#" id="login">Login</a>   
      </li> 
     </ul> 
    </div> 

Js:

$(document).ready(function(){ 
     $("#register").click(function(e){ 
      e.preventDefault(); 
      $('#loginbtn').addClass('hidden'); 
      $('#signupbtn').removeClass('hidden'); 
      return false; 
     }); 
    }); 

    $(document).ready(function(){ 
     $("#login").click(function(e){ 
      e.preventDefault(); 
      $('#loginbtn').removeClass('hidden'); 
      $('#signupbtn').addClass('hidden'); 
      return false; 
     }); 
    });