如何对隐藏的子菜单应用css规则？

如何将CSS规则应用于隐藏子菜单？我试图添加一些JS，但有一个问题，因为它不起作用。下面是我工作的代码的样本。想法是，点击锚文本'A'应该显示一个子菜单。预先感谢您的任何建议。如何对隐藏的子菜单应用css规则？

var sub=document.querySelector("#subBox"), 
 
subToggle=document.querySelector("#submenu"); 
 
    if (subToggle){ 
 
    subToggle.addEventListener("click", 
 
     function(e){ 
 
      if(sub.className=="open"){ 
 
      sub.className=""; 
 
     }else{ 
 
     sub.className="open"; 
 
     } 
 
     e.preventDefault(); 
 
     }, false); 
 
    }

body { 
 
\t background: #fff; 
 
\t font-family: 'Verdana', sans; 
 
\t color: #fff; 
 
\t text-align: center; 
 
} 
 

 
@media only screen and (max-width:768px){ 
 
\t body{font-size:16px;} 
 
} 
 

 
@media only screen and (min-width:769px){ 
 
\t body{font-size:32px;} 
 
} 
 

 
ul li{list-style-type: none;} 
 

 
li{display:inline;} 
 

 
a, li a{ 
 
    text-decoration: none; 
 
\t outline: none; 
 
    color:#fff; 
 
} 
 

 
#menu{ 
 
    width:100vw; 
 
    height:100vh; 
 
    display:block; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    background:#eacebe; 
 
    overflow:hidden; 
 
} 
 

 
#subBox{ 
 
    max-width:0; 
 
    max-height:0; 
 
    overflow:hidden; 
 
} 
 

 
#subBox .open{ 
 
    width:200px; 
 
    height:200px; 
 
    display:block; 
 
    position:relative; 
 
    background:gray; 
 
    color:#fff; 
 
} 
 

 
.skip{ 
 
\t clip: rect(0 0 0 0); 
 
\t margin: -1px; \t 
 
\t overflow:hidden; 
 
\t display: none; 
 
\t position: absolute; 
 
    top: -1px; 
 
    left: -1px; 
 
\t z-index: -1; 
 
}

<body> 
 
    <h1 class='skip'>Exploration of css rules of the hidden submenu</h1> 
 
    <div id='nav'> 
 
    <nav nav ul> 
 
     <h2 class='skip'>Menu with one submenu</h2> 
 
     <div id='menu'> 
 
     <ul> 
 
      <li id='submenu'> 
 
      <a href='/a'>A <!--A--> 
 
       <div id="subBox"> 
 
       <ul> 
 
        <li><a href='/aOne'>1</a><li> <!--A/1--> 
 
        <li><a href='/aTwo'>2</a></li> <!--A/2--> 
 
        <li><a href='/aThree'>3</a></li> <!--A/3--> 
 
       </ul> 
 
       </div> 
 
      </a> 
 
      </li> 
 
      <li><a href='/b'>B</a><li> <!--B--> 
 
      <li><a href='/c'>C</a></li> <!--C--> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
</body>

来源

2017-03-15 o_k_s_a_n_a

我不知道哪里是在代码中的错误：在CSS规则或JS（至少是没有语法错误，也许我有混淆querySelectors）或它的只有风格问题。对不起，这样的标题@isherwood –

你接近。您正在将.open类应用到#subBox，因此请将您的选择器更改为#subBox.open。

var sub=document.querySelector("#subBox"), 
 
subToggle=document.querySelector("#submenu"); 
 
    if (subToggle){ 
 
    subToggle.addEventListener("click", 
 
     function(e){ 
 
      if(sub.className=="open"){ 
 
      sub.className=""; 
 
     }else{ 
 
     sub.className="open"; 
 
     } 
 
     e.preventDefault(); 
 
     }, false); 
 
    }

body { 
 
    background: #fff; 
 
    font-family: 'Verdana', sans; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
@media only screen and (max-width:768px) { 
 
    body { 
 
    font-size: 16px; 
 
    } 
 
} 
 

 
@media only screen and (min-width:769px) { 
 
    body { 
 
    font-size: 32px; 
 
    } 
 
} 
 

 
ul li { 
 
    list-style-type: none; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
a, 
 
li a { 
 
    text-decoration: none; 
 
    outline: none; 
 
    color: #fff; 
 
} 
 

 
#menu { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eacebe; 
 
    overflow: hidden; 
 
} 
 

 
#subBox { 
 
    max-width: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 

 
#subBox.open { 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
    position: relative; 
 
    background: gray; 
 
    color: #fff; 
 
    overflow: visible; 
 
    max-height: 100%; 
 
    min-height: 100%; 
 
} 
 

 
.skip { 
 
    clip: rect(0 0 0 0); 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    display: none; 
 
    position: absolute; 
 
    top: -1px; 
 
    left: -1px; 
 
    z-index: -1; 
 
}

<body> 
 
    <h1 class='skip'>Exploration of css rules of the hidden submenu</h1> 
 
    <div id='nav'> 
 
    <nav nav ul> 
 
     <h2 class='skip'>Menu with one submenu</h2> 
 
     <div id='menu'> 
 
     <ul> 
 
      <li id='submenu'> 
 
      <a href='/a'>A <!--A--> 
 
       <div id="subBox"> 
 
       <ul> 
 
        <li><a href='/aOne'>1</a> 
 
      <li> 
 
       <!--A/1--> 
 
       <li><a href='/aTwo'>2</a></li> 
 
       <!--A/2--> 
 
       <li><a href='/aThree'>3</a></li> 
 
       <!--A/3--> 
 
     </ul> 
 
     </div> 
 
     </a> 
 
     </li> 
 
     <li><a href='/b'>B</a> 
 
     <li> 
 
      <!--B--> 
 
      <li><a href='/c'>C</a></li> 
 
      <!--C--> 
 
      </ul> 
 
    </div> 
 
    </nav> 
 
    </div> 
 
</body>

来源

2017-03-15 17:29:33

谢谢@Michael Coker，在您的帮助下，我也发现了我的问题，通过修正下面的＃subBox.open规则：overflow：visible;最大高度：100％;最小高度：100％。 –

@o_k_s_a_n_a真棒！别客气：） –

如何对隐藏的子菜单应用css规则？

回答

相关问题