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.


$("#login_button").click(function() {


var get_my_profile =function() {

FB.api("/me", function(response){
var username =response.name;

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


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


  } 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>
  <ul class="dropdown-menu">
    <li><a id="userProfile" href="#">User Profile</a></li>
    <li><a id="logOut" href="#">Logout</a></li>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download