Раскрывающийся список не закрывается впервые?

Question

У меня есть кнопка входа в систему в шапке.при успешном входе пользователя в систему в заголовке будет отображаться имя пользователя вместо имени входа (Примечание: имя пользователя извлекается из базы данных Firebase).При нажатии на имя пользователя, он выпадающий с опцией учетной записи и выхода из системы.

Моя проблема открывается при нажатии на имя пользователя, но при нажатии на имя пользователя он не закрывает выпадающие параметры.и кнопка каретки отображается справа.

Вот экран вывода

Вот мой код script.js.

В script.js я получаю имя пользователя и добавляю его в заголовок.

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        // User is signed in.
        auth = user;
        var uid = firebase.auth().currentUser.uid;
        console.log(uid);
        $('body').removeClass('auth-false').addClass('auth-true');
        db.collection("users").doc(uid)
            .onSnapshot(function(doc) {
                console.log("Current data: ", doc.data());
                var name = doc.data().name
                $('.user-info').append('<span class="user-name">' + name + '</span>');
                console.log(name);
            });
    } else {
        // User is signed out.

        $('body').removeClass('auth-true').addClass('auth-false');
        auth && contactsRef.child(auth.uid).off('child_added', onChildAdd);
        $('#contacts').html('');
        auth = null;
    }
});

вот мой код заголовка:

<ul class="nav navbar-nav navbar-right" >
    <!-- <li class="active" ><a href="#" style="color: #4F5459; font-size: 18px; font-weight: 600">What We Do <span class="sr-only">(current)</span></a></li> -->
    <li>
        <a href="#" style="color: #4F5459; font-size: 18px; font-weight: 600">What We Do</a>
    </li>

    <li>
        <a href="#" style="color: #4F5459; font-size: 18px; font-weight: 600">Savings Process</a>
    </li>
    <li>
        <a href="#" style="color: #4F5459; font-size: 18px; font-weight: 600">Tech</a>
    </li>
    <li>
        <a href="#" style="color: #4F5459; font-size: 18px; font-weight: 600">Pricing</a>
    </li>

    <!-- <li><button type="button" class="btn navbar-btn  userAuth unauthenticated" style="color: #4F5459; font-size: 18px; font-weight: 600; background-color: #ffffff00; outline: 0; box-shadow: none!important;" data-toggle="modal" data-target="#registerModal">Register</button></li> -->
    <li>
        <button type="button" class="btn navbar-btn  userAuth unauthenticated" style="color: #4F5459; font-size: 18px; font-weight: 600; background-color: #ffffff00; outline: 0; box-shadow: none!important;" data-toggle="modal" data-target="#loginModal">Login</button>
    </li>

    <button class="btn  navbar-btn userAuth unauthenticated" style="background-color: #71D72C; color: #4F5459; font-size: 18px;">Free Trail</button>

    <li class="dropdown">
        <a href="#" id="options" class="dropdown-toggle userAuth authenticated user-info" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color: #71D72C; font-size: 18px; font-weight: 600" alt="User">
            <span class="caret"/>
        </a>
        <ul class="dropdown-menu">
            <li>
                <button type="button" class="btn navbar-btn userAuth authenticated" id="logout"   >Logout</button>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
            <li>
                <a href="#">Something else here</a>
            </li>
        </ul>
    </li>
</ul>