2017-06-16 63 views
0

我想通过调用它的ID切换div。该元素是柔性容器内的柔性物品,初始display设置为none我的Flex项目不会显示一个JavaScript类别切换

<div id="header-menu-button" onclick="headerMenuToggle()"> 
    ... 
</div> 
<div id="header"> 
    ... 
    <nav id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Alternate Menu"> 
     ... 
    </nav> 
    ... 
</div> 

<style> 
    .header { 
     display: -webkit-flex; 
     display: flex; 
     -webkit-flex-flow: row wrap; 
     flex-flow: row wrap; 
     -webkit-justify-content: space-between; 
     justify-content: space-between; 
     -webkit-align-items: center; 
     align-items: center; 
    } 
    .header > * { 
     -webkit-flex: 1 100%; 
     -ms-flex: 1 100%; 
     -moz-flex: 1 100%; 
     flex: 1 100%; 
    } 
    .header-menu-wrapper { 
     display: none; 
    } 
    .show { 
     display:-webkit-flex; 
     display:flex; 
    } 
</style> 

<script> 
    function headerMenuToggle() { 
     document.getElementById("header-menu-wrapper").classList.toggle("show"); 
    } 
</script> 

回答

0

你的代码工作得很好:

function headerMenuToggle() { 
 
     document.getElementById("header-menu-wrapper").classList.toggle("show"); 
 
}
.header { 
 
     display: -webkit-flex; 
 
     display: flex; 
 
     -webkit-flex-flow: row wrap; 
 
     flex-flow: row wrap; 
 
     -webkit-justify-content: space-between; 
 
     justify-content: space-between; 
 
     -webkit-align-items: center; 
 
     align-items: center; 
 
    } 
 
    .header > * { 
 
     -webkit-flex: 1 100%; 
 
     -ms-flex: 1 100%; 
 
     -moz-flex: 1 100%; 
 
     flex: 1 100%; 
 
    } 
 
    .header-menu-wrapper { 
 
     display: none; 
 
    } 
 
    .show { 
 
     display:-webkit-flex; 
 
     display:flex; 
 
    }
<div id="header-menu-button" onclick="headerMenuToggle()"> 
 
    header-menu-button 
 
</div> 
 
<div id="header"> 
 
    header 
 
    <nav id="header-menu-wrapper" class="header-menu-wrapper" role="navigation" aria-label="Alternate Menu"> 
 
     header-menu-wrapper 
 
    </nav> 
 
    header 
 
</div>