haohao haohao - 4 years ago 140
Javascript Question

how to let a login button become a drop down menu after click

I am making a social website and encounter some problems about Facebook login.

I can login successfully.
The problem is that I hope after the user click the login button on navigation bar, the button will become a drop down menu.

If the user click the drop down menu, they can go to their profile site or logout.

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

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


and below is part of my js code.

$(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 Source

You can use FB.getLoginStatus() to determine if user is logged in or not.

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download