Bulma 可悬停或可切换下拉菜单

在本文中，我们将看到Bulma Hoverable 和 Toggable 下拉菜单。 Bulma 使用下拉列表为用户提供要选择的多个项目的列表。下面我们用他们的例子讨论了所有三种类型的下拉菜单。

Bulma Hoverable 或 Toggle 下拉类：

• dropdown-trigger：该类用于在单击触发时显示下拉项。
• is-active：该类用于一直显示下拉项。
• is-hoverable：此类用于在悬停在下拉触发器上时显示下拉项。

句法：

// Dropdown trigfer

    

        ....
    


// is-active dropdown

    

        ....
    


// is-hoverable dropdown

    

        ....
    

示例 1：下面的示例说明了 Bulma Hoverable 和 Toggable 下拉菜单。

HTML

  

    
    
    
    
    
    

  

    
        GeekforGeeks
        Bulma Hoverable or Toggable Dropdown
  
        
            
            
                
                    
                        Normal dropdown
                        
                            
                        
                    
                
                
                    
                         Java 
                         C++ 
                         Python 
                         C 
                        
                         DSA 
                    
                
            
  
            
            
                
                    
                        Hoverable dropdown
                        
                            
                        
                    
                
                
                    
                         Java 
                         C++ 
                         Python 
                         C 
                        
                         DSA 
                    
                
            
        
    
  
    
        const dropdown =
            document.querySelector('.dropdown');
        const active =
            document.querySelector('.is-active')
        document.body.addEventListener('click', function () {
            if (active) {
                dropdown.classList.remove('is-active')
            }
        })
        dropdown.addEventListener('click', function (event) {
            event.stopPropagation();
            this.classList.toggle('is-active');
        });
    

  

输出：

示例 2：下面的示例说明了 Bulma Active 下拉菜单。

HTML

  

    
    
    
    
    
    

  

    
        GeekforGeeks
        Bulma Active Dropdown
  
        
            
                
                    Active dropdown
                    
                        
                    
                
            
            
                
                     Java 
                     C++ 
                     Python 
                     C 
                    
                     DSA 
                
            
        
    
  
    
        const dropdown = document.querySelector(".dropdown");
        const active = document.querySelector(".is-active");
        document.body.addEventListener("click", function () {
            if (active) {
                dropdown.classList.remove("is-active");
            }
        });
        dropdown.addEventListener("click", function (event) {
            event.stopPropagation();
            this.classList.toggle("is-active");
        });
    

  

输出：

参考： https://bulma.io/documentation/components/dropdown/#hoverable-or-toggable