面板之間的切換

Question

我試圖實現一個解決方案，需要在2個獨立的面板之間切換，登錄和註冊。

每個面板應該具有以下特徵： 1-它們僅在單擊導航欄中的鏈接時顯示; 012-2-只有其中一個應該顯示在任何給定的時刻，允許切換激活它們的鏈接; 3-他們應該在右上角有一個「X」鏈接，允許關閉面板; 4-如果用戶點擊頁面內容，任一面板都會縮回。

這裏的HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-default"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a id="home"><!--HOME ANCHOR--></a> 
       <img src="http://placehold.it/190x40" style="padding-top: 5px;" /> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="navbar-default"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a id="toggleSignInPanel" class="no-border noto-sans" href="#SignInPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign In</a></li> 
        <li><a id="toggleSignUpPanel" class="no-border noto-sans" href="#SignUpPanel"><i class="fa fa-tablet padding-right-five-px"></i>Sign Up</a></li> 
       </ul> 
      </div> 
      <!-- /.navbar-collapse --> 
     </div> 
     <!-- /.container --> 
    </nav> 

    <br /> 
    <br /> 

    <div id="upper">   
     <div id="SignInPanel"> 
      <div class="clearfix"></div> 
      <div class="col-lg-12"> 
       <div class="col-md-6 col-sm-6"><h2>Sign In Left Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 1" /></div> 
       <div class="col-md-6 col-sm-6"><h2>Sign In Right Panel</h2><img class="responsive-img" src="http://placehold.it/400x250" alt="Test Image 2" /></div> 
      </div> 
      <div class="clearfix"></div> 
     </div> 

     <div id="SignUpPanel"> 
      <div class="clearfix"></div> 
      <div class="col-lg-12"> 
       <div class="col-md-6 col-sm-6"><h2>Sign Up Left Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div> 
       <div class="col-md-6 col-sm-6"><h2>Sign Up Right Panel</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat.</p></div> 
      </div> 
      <div class="clearfix"></div> 
     </div> 
    </div> 

    <div id="lower"> 
     <p>This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly. This is the remaining page content that should be pushed down to allow for either Sign In or Sign Up panel contents to be displayed accordingly.</p> 
    </div> 

這裏是JavaScript的：

//Toggle Sign In Panel 
$(document).ready(function(){ 
    $("#toggleSignInPanel").click(function(){ 
     $("#SignInPanel").slideToggle("slow"); 
    }); 
}); 

//Toggle Sign Up Panel 
$(document).ready(function(){ 
    $("#toggleSignUpPanel").click(function(){ 
     $("#SignUpPanel").slideToggle("slow"); 
    }); 
}); 

這是的jsfiddle我有到目前爲止有：http://jsfiddle.net/UXEngineer/qawccvbs/1/

會有人能夠幫助我有這個問題嗎？謝謝！

Answer 1

最簡單的解決方案就是調用api函數關閉所有其他面板，每次打開一個新的面板。 （另外，你不需要包裝的每個功能在新document ready電話。）

//Toggle Panel 
$(document).ready(function() { 
    $("#toggleSignInPanel").click(function() { 
     $("#SignInPanel").slideToggle("slow"); 
     $("#SignUpPanel").slideUp("slow"); 
    }); 
    $("#toggleSignUpPanel").click(function() { 
     $("#SignInPanel").slideUp("slow"); 
     $("#SignUpPanel").slideToggle("slow"); 
    }); 
}); 

這裏有一個新的小提琴打開一個新時關閉其他面板： http://jsfiddle.net/za1L1m77/

---

[編輯：]

合閘按鈕很簡單，你可能只是做同樣的事情如上：

$("#closingButton").click(function() { 
    $("#SignInPanel").slideUp("slow"); 
    $("#SignUpPanel").slideUp("slow"); 
}); 

現在，元素「點擊外部」的功能有點棘手，因爲您必須在除了切換之外的每個元素上都收聽點擊事件。一個簡單的方法是在窗口上整體放置一個「切換關閉」事件監聽器，並停止在切換元素上傳播。請記住，你將不能夠把事件偵聽器與在未來的應用停止傳播史元素的父母，並期望他們的工作：

$('html').click(function() { 
    $("#SignInPanel").slideUp("slow"); 
    $("#SignUpPanel").slideUp("slow"); 
}); 

加上它添加到所有的切換：

$("#toggleSignUpPanel").click(function (e) { 
    e.stopPropagation(); 
    $("#SignInPanel").slideUp("slow"); 
    $("#SignUpPanel").slideToggle("slow"); 
});