單擊后如何使登錄按鈕成為下拉菜單

Question

我正在建立一個社交網站，遇到有關Facebook登錄的一些問題。

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

如果用戶單擊下拉菜單，則可以轉到其個人資料站點或注銷。

對不起，我的英語演講很容易，我畫畫讓你理解

<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>