javascript - 如何让登录按钮在点击后变成下拉菜单

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>