ブルマドロップダウンが機能しない

Question

クリックするとブルマドロップダウンがトグルしないようです。 https://bulma.io/documentation/components/dropdown/

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet"/> 
 

 

 
<div class="dropdown is-active"> 
 
    <div class="dropdown-trigger"> 
 
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> 
 
     <span>Dropdown button</span> 
 
     <span class="icon is-small"> 
 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
     </span> 
 
    </button> 
 
    </div> 
 
    <div class="dropdown-menu" id="dropdown-menu" role="menu"> 
 
    <div class="dropdown-content"> 
 
     <a href="#" class="dropdown-item"> 
 
     Dropdown item 
 
     </a> 
 
     <a class="dropdown-item"> 
 
     Other dropdown item 
 
     </a> 
 
     <a href="#" class="dropdown-item is-active"> 
 
     Active dropdown item 
 
     </a> 
 
     <a href="#" class="dropdown-item"> 
 
     Other dropdown item 
 
     </a> 
 
     <hr class="dropdown-divider"> 
 
     <a href="#" class="dropdown-item"> 
 
     With a divider 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたはJavaScriptを使用して、クラスis-activeを切り替える必要があります。以下は、ドキュメントからのコードスニペットです。 .dropdwownが.is-activeの場合、displayは.dropdown-menuで、noneからblockに変更されます。

これを実装する基本的な方法は次のとおりです。あなたのjsある

var dropdown = document.querySelector('.dropdown'); 
 
dropdown.addEventListener('click', function(event) { 
 
    event.stopPropagation(); 
 
    dropdown.classList.toggle('is-active'); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" /> 
 

 

 
<div class="dropdown"> 
 
    <div class="dropdown-trigger"> 
 
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> 
 
     <span>Dropdown button</span> 
 
     <span class="icon is-small"> 
 
     <i class="fa fa-angle-down" aria-hidden="true"></i> 
 
     </span> 
 
    </button> 
 
    </div> 
 
    <div class="dropdown-menu" id="dropdown-menu" role="menu"> 
 
    <div class="dropdown-content"> 
 
     <a href="#" class="dropdown-item"> 
 
     Dropdown item 
 
     </a> 
 
     <a class="dropdown-item"> 
 
     Other dropdown item 
 
     </a> 
 
     <a href="#" class="dropdown-item is-active"> 
 
     Active dropdown item 
 
     </a> 
 
     <a href="#" class="dropdown-item"> 
 
     Other dropdown item 
 
     </a> 
 
     <hr class="dropdown-divider"> 
 
     <a href="#" class="dropdown-item"> 
 
     With a divider 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>