如何讓登錄按鈕成爲點擊後的下拉菜單

Question

我正在製作一個社交網站，並遇到關於Facebook登錄的一些問題。

我可以成功登錄。 問題是我希望用戶點擊導航欄上的登錄按鈕後，該按鈕將變成一個下拉菜單。

如果用戶點擊下拉菜單，他們可以去他們的個人資料站點或註銷。

Sorry for my English presentation so I draw picture to make you understand

<a id="login_button">Login</a> 

以下是我的js代碼的一部分。

$(function(){ 

    $("#login_button").click(function() { 
     FB.login(); 
     get_my_profile(); 
    }); 

    }); 

    var get_my_profile =function() { 

    FB.api("/me", function(response){ 
     var username =response.name; 
     $("#profile_name").html(username); 
    }); 

    FB.api("/me/picture", function(response) { 
     var userpicture =response.data.url; 
     $("#profile_picture").attr("src", userpicture); 
    }); 
    } 

Answer 1

您可以使用FB.getLoginStatus（）來確定用戶是否已登錄。

FB.getLoginStatus(function(response) { 
    if (response.status === 'connected') { 
    // the user is logged in and has authenticated your app 

    $("#userMenu").show(); 


    } else if (response.status === 'not_authorized') { 
    // the user is logged in to Facebook, 
    // but has not authenticated your app 

    $("#login_button").show(); 

    } else { 
    // the user isn't logged in to Facebook. 
    } 
}); 



<a id="login_button" style="display: none;">Login</a> 


<div class="btn-group" id="userMenu" style="display: none;"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    UserName <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a id="userProfile" href="#">User Profile</a></li> 
    <li><a id="logOut" href="#">Logout</a></li> 
    </ul> 
</div>