javascript - 向三行菜单图标添加下拉菜单

Question

我正在使用来自 w3 的示例为我的网站创建菜单图标。它运行良好，但我试图在单击该图标时添加一个下拉菜单。

我添加了 div id="mydropdown" 以尝试创建我想要的菜单。

function myFunction(x) {
    x.classList.toggle("change");
}

    .container {
        display: inline-block;
        cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    
    /* Rotate first bar */
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }
    
    /* Fade out the second bar */
    .change .bar2 {
        opacity: 0;
    }
    
    /* Rotate last bar */
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }

 
    <h1>
         <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>

                <div id="myDropdown" class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
                </div>
            </div>
    </h1>
        
           
           
 

Answer 1

点击时切换下拉菜单的样式
document.getElementById('myDropdown').style.display = document.getElementById('myDropdown').style.display =='block' ? “无”:“阻止”；

function myFunction(x) {
    x.classList.toggle("change");
    
    document.getElementById('myDropdown').style.display = document.getElementById('myDropdown').style.display =='block' ?   'none' : 'block';
}

.container {
        display: inline-block;
        cursor: pointer;
    }
    
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }
    
    /* Rotate first bar */
    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
        transform: rotate(-45deg) translate(-9px, 6px) ;
    }
    
    /* Fade out the second bar */
    .change .bar2 {
        opacity: 0;
    }
    
    /* Rotate last bar */
    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
        transform: rotate(45deg) translate(-8px, -8px) ;
    }
    .dropdown-content{
      display:none;
    }

<h1>
         <div class="container" onclick="myFunction(this)">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>

                <div id="myDropdown" class="dropdown-content">
                  <a href="#">Link 1</a>
                  <a href="#">Link 2</a>
                  <a href="#">Link 3</a>
                </div>
            </div>
    </h1>