下拉菜单不会第一次关闭吗？

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>