deactivate class with another event

I'm trying to make a individual dropdown container like of that on the nopnav of the google, well everything runs ok, exept the fact that i would like to deactivate the activated class of the 开发者_JAVA技巧trigger event when i click on to hide the container!

Inserted the page where are the links where will be triggered to push up the container, and the second page is the content of the container, where i put in one script to hide the container and the second one to "tabfy" the menu with the jquery tools tabs.

Here's the code:

$(function () {
    "use strict";
    $(".user-link").click(function (e) {
        e.preventDefault();
        if ($(".user-link").hasClass("#buser-box")) {
            $(".user-link").removeClass("#buser-box");
        } else {
            $('#buser-box').show('fast');
            $(".user-link").addClass("active");
        }
        $.ajax({
            url: "conta-box/conta-home.html",
            cache: false,
            dataType: "html",
            success: function (data) {
                $("#buser-box").html(data);
                if (!$(this).hasClass("#buser-box")) {
                    $("#buser-box").removeClass("#buser-box");
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    });
});

HTML of the Index:

<div class="tabs-global">
    <ul id="nav">
        <li class="user-link" title="Conta"><a class="user-box"></a></li>
        <li class="loja-link" title="Loja"><a class="loja-box"></a></li>
        <li class="ava-link" title="Avaliação"><a class="ava-box"></a></li>
    </ul>
</div>
<div id="buser-box"></div>
<div id="loja-box"></div>
<div id="ava-box"></div>

HTML of the container-content:

<div class="topbar">
    <span class="box-close" onclick="box.close();"></span>
</div>
<div id="menu-box">
    <h2>
        <span class="icones-conta"></span><span class="texto">Conta</span></h2>
    <ul id="conta-tabs">
        <li class="current"><a href="box/conta-box/conf.html">Configuração</a></li>
        <li><a href="box/conta-box/conf-end.html">Localização</a></li>
        <li><a href="box/conta-box/compras.html">Compras</a></li>
    </ul>
</div>
<div id="conta-container"></div>

<script type="text/javascript" src="./js/jquery.tools.min.js"></script>

<script type="text/javascript">
    $(".box-close").click(function () {
        $("#buser-box").hide("fast");
    });
</script>

If you use any Jquery property that refers to class, you then need to use a class.

For example:

if ($(".user-link").hasClass("#buser-box")) {
    $(".user-link").removeClass("#buser-box");
}

Should Be:

 if ($(".user-link").hasClass("buser-box")) {
        $(".user-link").removeClass("buser-box");
  }

Also you could try a click function for showing and a click function for hiding:

// hide your dropdown menu by default
    $('#myMenuContainer').addClass('closed').hide(); 


    $('.mylink').click(function(showMenu){
     //display your drop down menu
    if($('#myMenuContainer').hasClass('closed')) {
    $('#myMenuContainer').show().addClass('open').removeClass('closed');
    }
    });

    $('.mylink').click(function(showMenu){
    //hide your drop down menu
    if($('#myMenuContainer').hasClass('open')) {
    $('#myMenuContainer').removeClass('open').addClass('closed').hide();
    }
    });