布爾瑪下拉不起作用

布爾瑪下拉式似乎無法在點擊上切換。下面是從文檔的代碼片段：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>

來源

2017-10-17 Aakash Thakur

哪裏是你的js？ – sol

但是你的小提琴中的標記看起來與文檔中的標記大不相同。像'dropdown'類和'dropdown-trigger'類缺失。 –

則需要使用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>

來源

2017-10-17 09:54:24 sol

很酷。現在明白了。 –

很高興幫助！ – sol

我還想問一件事。圖標在布爾瑪工作嗎？我嘗試了一些，但沒有工作。 –

布爾瑪下拉不起作用

回答

相關問題