Bulma 드롭 다운이 작동하지 않음

Question

Bulma 드롭 다운이 클릭시 전환되지 않는 것 같습니다. 당신은 자바 스크립트를 사용하여 클래스 is-active을 전환 할 필요가 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

: 다음은 문서에서 코드입니다. .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>