javascript - 如何在页面加载时隐藏下拉列表？

Question

我有一个 dropdown 菜单，如下所示:

<ul>
    <li class="dropdown open">
        <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
            <span class="user-name">Hi Rajendra! <i class="fa fa-angle-down"></i></span>
            <img class="img-circle avatar" src="#" alt="" width="40" height="40">
        </a>
        <ul class="dropdown-menu dropdown-list" role="menu" style="">
            <li role="presentation"><a href="profile.html"><i class="fa fa-user"></i>Profile</a></li>
            <li role="presentation"><a href="login.html"><i class="fa fa-sign-out m-r-xs"></i>Log out</a></li>
        </ul>
    </li>
</ul> 

这是一个Screenshot .

问题:

它在第一次没有点击菜单的情况下在页面加载时显示下拉列表，我尝试使用 visibility: hidden 和 display: none，它隐藏列表但不显示单击菜单后再次。

请帮帮我!!

帮助将不胜感激!!

Answer 1

我假设你正在使用一个框架来处理其中的一些，我相信只要删除类 open 就会让它看起来像关闭的:

<ul>
<li class="dropdown">
    <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
        <span class="user-name">Hi Rajendra! <i class="fa fa-angle-down"></i></span>
        <img class="img-circle avatar" src="#" alt="" width="40" height="40">
    </a>
    <ul class="dropdown-menu dropdown-list" role="menu" style="">
        <li role="presentation"><a href="profile.html"><i class="fa fa-user"></i>Profile</a></li>
        <li role="presentation"><a href="login.html"><i class="fa fa-sign-out m-r-xs"></i>Log out</a></li>
    </ul>
</li>