JQuery響應式菜單將不起作用

我是一個沒有真正的jQuery知識的新手web開發人員，所以請耐心等待。我試圖做一個簡單的移動響應下拉菜單（理想情況下，我想要一張幻燈片，但嬰兒的步驟第一）。大多數情況下，我明白了。但是，我將我的「無序列表」分配給了一個ID選擇器，它似乎不再起作用。我忽略了什麼？提前致謝！JQuery響應式菜單將不起作用

這是我的代碼：JSFiddle

$(document).ready(function(){ 
 
    $('#toggle-button').click(function(){ 
 
     
 
     $('#menu').toggleClass('show'); 
 
     
 
     
 
     
 
    }); 
 
    
 
});

.show { 
 
    display: block; 
 
} 
 

 
nav { 
 
    background: black; 
 
    width: 100%; 
 
} 
 

 
.menu-bar { 
 
    width: 100%; 
 
    background: black; 
 
    height: 50px; 
 
} 
 

 
#toggle-button { 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 60px; 
 
    height: 35px; 
 
    width: 35px; 
 
    background: red; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 

 
#menu { 
 
    list-style: none; 
 
    width: 100%; 
 
    display: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#menu li { 
 
    height: 50px; 
 
    background: #535252; 
 
} 
 

 
#menu li a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 50px; 
 
    text-align: center; 
 
    line-height: 50px; 
 
    color: white; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
#menu li:hover { 
 
    background: gray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="menu-bar"></div> 
 

 
    <nav> 
 
     
 
     <ul id="menu"> 
 
      <li><a href="#">Profile</a></li> 
 
      
 
      <li><a href="#">Profile</a></li> 
 
      
 
      <li><a href="#">Profile</a></li> 
 
     </ul> 
 
    </nav> 
 

 
<a id="toggle-button" href="#"></a>

來源

2015-11-08 skullmonkey714

用途：

#menu.show { 
    display: block; 
}

後！你定義了默認值#menu {
https://jsfiddle.net/nw2wf3uh/6/

，或者使用不那麼好的!important：
https://jsfiddle.net/nw2wf3uh/7/

.show { 
    display: block !important; /* if .show is placed before #menu styles in CSS */ 
}

你也可以去周圍的其他方法，設置您的#menu a默認爲.hide：

<ul id="menu" class="hide">

CSS：

.hide { 
    display: none; /* but remove display:none; from #menu now! */ 
}

和切換是.hide類：

$('#toggle-button').click(function(){ 
    $('#menu').toggleClass('hide'); 
    // or simply: $('#menu').toggle(); 
});

這裏，你會不會遇到壓倒一切的風格事業優先的，你就不必使用!important修復（但如果有任何問題，您可能會遇到JS禁用用戶的問題（您應該不會太在意，但總是依賴）。

來源

2015-11-08 23:59:40

是的，CSS從上到下呈現並覆蓋在其他（下一個）樣式之前聲明的樣式，請記住，除非您沒有選擇例如外部插件或腳本由其他人構建。但對於你自己的項目，沒有任何藉口使用'！important'，或者你做錯了什麼:) –

Roko，你的第一個建議工作。你的解釋也是完全意義上的。謝謝！！我被教導只在極端情況下才使用！重要規則。感謝Rens的領導！ – skullmonkey714

JQuery響應式菜單將不起作用

回答

相關問題