freeCodeCamp

7.6 KiB

Raw Blame History

title	localeTitle
How to Create a Dropdown Menu with CSS and JavaScript	如何使用CSS和JavaScript创建下拉菜单

如何使用CSS和JavaScript创建下拉菜单

在本教程中，您将学习如何使用vanilla Javascript，HTML和CSS创建一个简单的下拉菜单。我们将介绍HTML，CSS和Javascript代码，但更多地关注编程，因为这是一个JS教程。我们将只使用普通的JS和CSS，没有框架或预处理器。唯一（种类）异常将导入Font Awesome CSS文件，因为我们将使用其中一个图标。

这是针对平均了解HTML，CSS和JS的开发人员。我试图让它尽可能干净，但我不会过分关注细节。我希望你们都喜欢。

截图

这是代码结果的样子：

初始屏幕：

下拉开启：

下拉选项已选中：

HTML：

在本节中，我们将讨论演示页面的HTML代码的实现。首先，让我们看一下<head>代码


<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Dropdown Example</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="styles.css"> 
 </head>

这基本上是HTML头文件样板，除了加载我们将在本教程中使用的两个CSS样式表的link标记：Font Awesome样式和styles.css文件，我们将在其中定义此页面的样式。

然后，还有HTML文件的其余部分，正文：


<body> 
    <div class='dropdown'> 
        <div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div> 
 
        <div class='menu pointerCursor hide'> 
            <div class='option' id='option1'>Option 1</div> 
            <div class='option' id='option2'>Option 2</div> 
            <div class='option' id='option3'>Option 3</div> 
            <div class='option' id='option4'>Option 4</div> 
        </div> 
 
    </div> 
    <span id='result'>The result is: </span> 
    <script> 
      ... 
    </script> 
 </body> 
 </html>

本节可分为3个主要部分：

.dropdown div，将定义下拉元素的结构。
#result元素，将包含用户选择的选项，来自下拉列表元素。
写入<script>标记的<script> 。它的实现在这里隐藏，因为它的细节将在本教程的最后一节中解释。

dropdown元素是一个包含title和menu元素的div 。前者只定义在选择任何选项之前将在元素上显示的文本，后者将定义元素可选择的选项。

result元素只是为了显示当前选择的选项。

样式：

您可以在下面查看完整的css代码。正如您所看到的，它使用了CSS3 transition和transform结构。

请注意.dropdown类的定义。这些用于定义下拉容器组件及其内部元素的布局，例如.title及其.option 。

body{ 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
 } 
 
 .hide { 
    max-height: 0 !important; 
 } 
 
 .dropdown{ 
    border: 0.1em solid black; 
    width: 10em; 
    margin-bottom: 1em; 
 } 
 
 .dropdown .title{ 
    margin: .3em .3em .3em .3em; 
    width: 100%; 
 } 
 
 .dropdown .title .fa-angle-right{ 
    float: right; 
    margin-right: .7em; 
    transition: transform .3s; 
 } 
 
 .dropdown .menu{ 
    transition: max-height .5s ease-out; 
    max-height: 20em; 
    overflow: hidden; 
 } 
 
 .dropdown .menu .option{ 
    margin: .3em .3em .3em .3em; 
    margin-top: 0.3em; 
 } 
 
 .dropdown .menu .option:hover{ 
    background: rgba(0,0,0,0.2); 
 } 
 
 .pointerCursor:hover{ 
    cursor: pointer; 
 } 
 
 .rotate-90{ 
    transform: rotate(90deg); 
 }

JavaScript的：

现在我们将看到Javascript部分是如何实现的。我们将首先介绍函数定义然后调用这些函数的代码使下拉动作发生。

基本上，根据用户交互的内容，有3个动作，因为他们的侦听器被添加到DOM元素：

单击下拉元素
选择其中一个下拉选项
更改当前选定的选项

我想说明我们使用的是箭头函数（ () => {} ）和const关键字，它们是ES6的特性。如果你使用的是最新版本的浏览器，那么你可能会很好，但请记住这一点。

1.单击下拉元素

function toggleClass(elem,className){ 
    if (elem.className.indexOf(className) !== -1){ 
        elem.className = elem.className.replace(className,''); 
    } 
    else{ 
        elem.className = elem.className.replace(/\s+/g,' ') +   ' ' + className; 
    } 
 
    return elem; 
 } 
 
 function toggleDisplay(elem){ 
    const curDisplayStyle = elem.style.display; 
 
    if (curDisplayStyle === 'none' || curDisplayStyle === ''){ 
        elem.style.display = 'block'; 
    } 
    else{ 
        elem.style.display = 'none'; 
    } 
 } 
 
 
 function toggleMenuDisplay(e){ 
    const dropdown = e.currentTarget.parentNode; 
    const menu = dropdown.querySelector('.menu'); 
    const icon = dropdown.querySelector('.fa-angle-right'); 
 
    toggleClass(menu,'hide'); 
    toggleClass(icon,'rotate-90'); 
 }

单击下拉元素时，它将打开（如果已关闭）或关闭（如果已打开）。这通过将toggleMenuDisplay绑定到下拉列表元素上的click事件侦听器来实现。此函数通过使用toggleDisplay和toggleClass函数切换其menu元素的显示。

2.选择其中一个下拉选项

function handleOptionSelected(e){ 
    toggleClass(e.target.parentNode, 'hide'); 
 
    const id = e.target.id; 
    const newValue = e.target.textContent + ' '; 
    const titleElem = document.querySelector('.dropdown .title'); 
    const icon = document.querySelector('.dropdown .title .fa'); 
 
 
    titleElem.textContent = newValue; 
    titleElem.appendChild(icon); 
 
    //trigger custom event 
    document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); 
    //setTimeout is used so transition is properly shown 
    setTimeout(() => toggleClass(icon,'rotate-90',0)); 
 }

3.更改当前选择的选项

function handleTitleChange(e){ 
    const result = document.getElementById('result'); 
 
    result.innerHTML = 'The result is: ' + e.target.textContent; 
 }

函数handleTitleChange绑定到.title元素上的自定义change事件，以便在title元素更改时更改#result元素内容。此事件的触发在上一节中完成。

主要代码

//get elements 
 const dropdownTitle = document.querySelector('.dropdown .title'); 
 const dropdownOptions = document.querySelectorAll('.dropdown .option'); 
 
 //bind listeners to these elements 
 dropdownTitle.addEventListener('click', toggleMenuDisplay); 
 dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); 
 document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

在主要部分中，只有一些简单的代码可以获取下拉列表的标题和选项元素，以便将最后一节中讨论的事件绑定到它们。

演示

可在此处找到此应用程序的完整代码和演示。

7.6 KiB Raw Blame History Unescape Escape