Meteor fontawesome下拉菜单在开始时打开

时间:2016-12-07 13:29:16

标签: meteor font-awesome dropdown

我有这个使用meteor和fontawesome软件包的html页面。当我打开这个页面时,我打开了所有下拉菜单,当我点击其中一个向下箭头时,它们都关闭了。我做了很多尝试关闭这些面板,但所有尝试都停止正确隐藏/显示面板。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>APP</title>
</head>
<body>
    <div class="container">
        {{> loginButtons }}
        {{> userList }}
</div>
</body>

<template name="userList">
    {{#if currentUser}}
        <div id="userList" class = "panel panel-default"> 
            <div class="panel-heading">Users</div>
            <ul class = "list-group">
                {{#each user in allUser}}
                    {{#with user}}
                        <li class="user list-group-item >{{> userOptions }}</li>
                    {{/with}}
                {{/each}}
            </ul>
        </div>
    {{/if}}
</template>


<template name="userOptions">
    <div class="btn-group open">
        <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> {{username}} </a>
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
            <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
         </ul>
    </div>
</template>

enter image description here

我看到他们有css显示:阻止。在控制台上,我尝试编写$(".dropdown-menu").toggle()并且它可以工作,但在我无法打开下拉菜单后

1 个答案:

答案 0 :(得分:1)

如果您不希望默认情况下打开,请从<div class="btn-group open">中删除。