创建按下特定键后发生的引导程序下拉菜单

下拉列表是一组链接或列表，在单击按钮或键盘事件时显示。 Bootstrap 还提供了一个框架来实现下拉菜单。但是默认的引导下拉事件仅通过鼠标单击发生。

在本文中，我们将看到如何覆盖此默认功能并在按下特定键后发生引导下拉事件。

让我们看看一步一步的实现：

步骤 1：添加 HTML 代码以创建一个显示下拉列表的按钮

• 将引导程序最新缩小的 CSS 链接到 HTML 文档。
• 将引导下拉组件框架添加到 HTML 代码中。
• HTML 代码完美地创建了下拉菜单，但默认情况下只需单击即可发生下拉事件。要在按键上执行此事件，我们必须使用脚本标记添加额外的 JavaScript 代码。

第 2 步：添加 JavaScript 代码以使下拉菜单出现

• 创建一个变量并将特定键的键码作为输入。
• 创建一个名为 activateDropdown() 的函数，该函数将在调用时显示下拉菜单。在该函数，我们选择名为 #myDropdown 的 id 并切换驻留在该 div 内的所有类（下拉元素）的状态。这里切换状态只是意味着如果显示则隐藏它，如果隐藏则显示它。
• 当我们的特定键被按下时调用该函数。

HTML

  

    
    

  

    
    
        
            Dropdown button
        
  
        
              
            
                Action
            
            
                Another action
            
            
                Something else here
            
        
    
  
    
    
  
        // Create a variable and take the
        // key-code of the specific key as
        // an input prompt
        let keyToShow = prompt("Please enter the "
            + "key code, After pressing that key "
            + "dropdown will occur");
  
        /* Create a function named activateDropdown()
        that will show the dropdown menu when called. 
        Inside that function we selected the id named 
        #myDropdown and toggled the state of all the 
        classes (dropdown elements) residing inside 
        that div */
        function activateDropdown() {
            document.getElementById("myDropdown")
                .classList.toggle("show");
        }
  
        // Call the function when our specific
        // key is pressed
        document.addEventListener('keydown', function(event) {
            if (event.keyCode == keyToShow) {
                activateDropdown();
            }
        });
    

  

输出：

说明：在输出视频中，首先我们输入了等于13的“Enter”键的键码，然后每当我们在键盘上按回车键时就会发生下拉事件。我们可以看到，当下拉事件发生时，鼠标光标也是固定的。