2016-12-07 6 views
0

このhtmlページは流星やフォントワームのパッケージを使っています。このページを開くと、すべてのドロップダウンメニューが開き、下矢印のいずれかをクリックすると、すべて閉じます。私はこれらのチャンネルを閉じようと多くの努力をしていますが、すべてのチャンネルの正しい非表示/表示を止めようとします。ブロック:私は、彼らはCSSのディスプレイを持って見メテオのフォントワームのドロップダウンメニューが起動時に開きます

<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

。コンソールで私は$(".dropdown-menu").toggle()と書こうとすると動作しますが、その後はドロップダウンメニューを開くことができません

+0

これらのテンプレートのJavaScriptを投稿できますか?イベントの処理方法を確認する必要があります。私はあなたのイベントがテンプレートインスタンスにスコープされていないと推測しています - そのため、1つのドロップダウンをクリックするとそれらはすべて開いています。これはあなたのイベントマップでより意味をなさないでしょう。 – rubie

答えて

1

デフォルトでは開きたくない場合は、ただちに開けて<div class="btn-group open">から削除してください。

+0

OMG!はい、それはちょうどこれだった...私達は尋ねる前にコードの1つのビルを読む必要があります... – IfThenElse

関連する問題