如何在页面加载时隐藏下拉列表?

时间:2015-10-07 03:07:07

标签: javascript jquery html css drop-down-menu

我的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: hiddendisplay: none,它会隐藏列表,但在点击菜单后不再显示。

请帮助我!!

欢迎帮助!!

1 个答案:

答案 0 :(得分:2)

我假设你正在使用一个框架来处理其中一些问题而且我相信只要将类打开就会让它看起来很封闭:

<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>