布尔玛下拉不起作用

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。

这是一个实现它的基本方法。

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>