布尔玛 Dropup

Bulma 是一个免费的开源 CSS 框架，用于制作美观且响应迅速的网站。它基于弹性盒。在本文中，我们将了解如何在 Bulma 中创建 dropup。

Dropup 就像一个下拉菜单，但它向上打开。要将下拉菜单转换为下拉菜单，您只需将is-up修饰符添加到下拉组件。

布尔玛 Dropup 课程：

• is-up：该类用于下拉组件，使其向上打开。

句法：

    ...

示例：下面的示例说明了使用is-up类在 Bulma 中创建下拉菜单。

HTML

  Bulma Dropup
  
  
  
    .container>p{
      margin-top: 30px;
    }
  


    
      GeeksforGeeks
    
    
      Bulma Dropup
    
    
        Normal Dropdown:
  
        
            
                
                    Select a topic
                    
                        
                    
                
            
            
                
                    
                        Algorithms
                    
                    
                        DBMS
                    
                    
                        Data Structures
                    
                
            
        
        Dropdown with is-up modifier:
  
        
            
                
                    Select a topic
                    
                        
                    
                
            
            
                
                    
                        Algorithms
                    
                    
                        DBMS
                    
                    
                        Data Structures
                    
                
            
        
    
    
        var triggers = document.querySelectorAll(
            ".dropdown .dropdown-trigger");
        triggers.forEach(function (trigger) {
            var isopen = false;
            trigger.addEventListener('click', function(){
                if(isopen){
                    trigger.parentElement.classList.remove("is-active");
                    isopen = false;
                }else{
                    trigger.parentElement.classList.add("is-active");
                    isopen = true;
                }
            })
        });
    

输出：

布尔玛 Dropup

参考： https://bulma.io/documentation/components/dropdown/#dropup