创建在按下特定键后发生的引导程序下拉列表

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

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

让我们看一下分步实施：

步骤1：添加HTML代码以创建一个显示Dropdown的按钮

• 将最新的引导程序最小化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();
            }
        });
    

  

输出：

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