避免jQuery在響應式導航菜單中覆蓋CSS

Question

我正在構建一個具有頂部導航欄的響應式網站。當窗口小於919px時，條形消失，出現MENU按鈕（通常通過{display: none;}隱藏）。點擊之後，它會打開一個下拉菜單與關閉下拉並帶回MENU按鈕十字：

<script> 
function myFunction() { 
$(document).ready(function(){ 
    $(".icon").click(function(){ 
     $(".icon").hide(); 
     $("#dropdown").show(); 
    }); 
}); 
} 
</script> 

<script> 
function myFunction2() { 
$(document).ready(function(){ 
    $("#cross").click(function(){ 
     $("#dropdown").hide(); 
     $(".icon").show(); 
    }); 
}); 
} 
</script> 

這一切工作正常的網站的小版本。但是，只要我點擊了菜單按鈕至少一次，並將網站重新調整到大於919像素，按鈕或下拉菜單（取決於打開的任何一個）不會消失，除非我刷新頁。

據我所知，jQuery的.show()從某種程度上覆蓋了我的CSS中的{display: none;}，但我無法弄清楚如何防止它。我會非常感謝任何關於如何解決這個問題的想法！我是新手，很高興能學會解決這個問題。

編輯

$(document).ready(function(){ 
 
    $("#iconmenulink").click(function(){ 
 
\t \t $("#iconmenu").addClass("dropdownnav_hidden"); 
 
\t \t $("#dropdown").addClass("dropdownnav_shown"); 
 
    }); 
 
}); 
 

 
$(document).ready(function(){ 
 
    $("#cross").click(function(){ 
 
\t \t $("#dropdown").addClass("dropdownnav_hidden"); 
 
\t \t $("#iconmenu").addClass("dropdownnav_shown"); 
 
    }); 
 
});

.dropdownnav_shown { 
 
    display:block; 
 
    position: absolute; 
 
    right: 28px; 
 
    top:29px; 
 
    float:right; 
 
    background-color:white; 
 
    border: 2px solid; 
 
    border-color:#8A2BE2; 
 
    text-decoration: none; 
 
    padding:0; 
 
} 
 

 
.dropdownnav_hidden { 
 
    display:none; 
 
} 
 

 

 
.dropdownnav_shown ul { 
 
\t list-style-type: none; 
 
    transition: 0.3s; 
 
    font-family: 'Karla', sans-serif; 
 
\t font-weight: bold; 
 
\t font-size: 16px; 
 
\t color: black; 
 
\t padding-left:20px; 
 
\t padding-right:10px; 
 
\t line-height:150%; 
 
\t margin-top:5px; 
 
\t margin-bottom:10px; 
 
} 
 

 
.dropdownnav_shown ul li a { 
 
    text-decoration: none; 
 
\t color:black; 
 
\t margin-right:10px; 
 
\t } 
 

 
.dropdownnav_shown ul li a:visited {color: black;} 
 
.dropdownnav_shown ul li a:hover {color:#8A2BE2;} 
 

 

 

 
#iconmenu a { 
 
\t line-height:100%; 
 
\t padding:0; 
 
\t vertical-align:bottom; 
 
} 
 

 

 
#cross {font-size: 22px; 
 
\t \t text-align:right; 
 
\t \t margin-bottom:5px; 
 
} 
 

 
#cross a {color: #8A2BE2; 
 
}

<div class="dropdownnav_shown" id="iconmenu"> 
 
\t <ul> 
 
    \t <li id="iconmenulink"> <a> MENU </a> 
 
     <li> 
 
    </ul> 
 
</div> 
 

 
<div class ="dropdownnav_hidden" id="dropdown"> 
 
\t <ul> 
 
    \t \t <li id="cross"> <a href="#cross" onclick="myFunction2()"> × </a></li> 
 
\t \t \t <li><a href="#recordings">RECORDINGS</a></li> 
 
\t \t \t <li><a href="#news">NEWS</a></li> 
 
      <li><a href="#cv">CV</a></li> 
 
    \t \t \t <li><a href="mailto:123@riseup.net">CONTACT</a></li> 
 
      <li><a href="https://facebook.com/123" target=_blank>FB</a></li> 
 

 
     </ul> 
 
</div>

Answer 1

你的問題是由JQuery的.show（）用於設置所顯示的元素上的內嵌樣式引起的。內聯樣式在涉及到CSS優先規則時勝出。因此，「display：none」或display：block的直接風格被設置超過了您的CSS。

如果您希望CSS樣式控制響應式佈局，請嘗試使用JQuery在元素上設置類，而不是在單擊時使用show（）和hide（），類如'is_shown'或'not_shown '可以用於附加類的應用（而不是強制內聯樣式）。

然後，您可以使用CSS規則（和您現有的媒體查詢）做

.is_shown { 
    display:block; 
} 
.not_shown { 
    display:none; 
} 

這樣的感冒，那就太好只會增加或刪除的額外CSS類，但你的CSS根據需要控制的佈局和可視性大小...

添加替換您的.show（）和.hide（）調用的JQuery與適當的.addClass（）和.removeClass（），而不是..

Answer 2

所以我最終解決它通過使用jQuery .hide和.show，但在一個<div>內這樣做，而不是隱藏一個<div>並顯示其他。迄今爲止，所有窗口尺寸均可正常工作。

.dropdownnav_shown ul { 
 
    list-style-type: none; 
 
    font-family: 'Karla', sans-serif; 
 
    font-weight: bold; 
 
    font-size: 16px; 
 
    color: black; 
 
    padding-left: 20px; 
 
    padding-right: 10px; 
 
    line-height: 150%; 
 
    margin-top: 5px; 
 
    margin-bottom: 5px; 
 
} 
 
.dropdownnav_shown ul li a { 
 
    text-decoration: none; 
 
    color: black; 
 
    margin-right: 10px; 
 
} 
 
.dropdownnav_shown ul li a:visited { 
 
    color: black; 
 
} 
 
.dropdownnav_shown ul li a:hover { 
 
    color: #8A2BE2; 
 
} 
 
#cross a:hover, 
 
#iconmenulink a:hover { 
 
    color: black; 
 
} 
 
#cross { 
 
    font-size: 22px; 
 
    text-align: right; 
 
    margin-bottom: 5px; 
 
    display: none; 
 
} 
 
#recordings, 
 
#news, 
 
#cv, 
 
#contact, 
 
#fb { 
 
    display: none; 
 
} 
 
#dropdown { 
 
    display: none; 
 
} 
 

 
} 
 
@media screen and (max-width: 919px) { 
 
    #dropdown { 
 
    display: block; 
 
    position: absolute; 
 
    right: 28px; 
 
    top: 29px; 
 
    float: right; 
 
    background-color: white; 
 
    border: 2px solid; 
 
    border-color: #8A2BE2; 
 
    text-decoration: none; 
 
    padding: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $("#iconmenulink").click(function() { 
 
     $(this).hide(); 
 
     $("#cross, #recordings, #news, #cv, #contact, #fb").show(); 
 
    }); 
 
    }); 
 
</script> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $("#cross").click(function() { 
 
     $("#cross, #recordings, #news, #cv, #contact, #fb").hide(); 
 
     $("#iconmenulink").show(); 
 
    }); 
 
    }); 
 
</script> 
 

 
<div class="dropdownnav_shown" id="dropdown"> 
 
    <ul> 
 
    <li id="iconmenulink"> <a href="#menu"> MENU </a> 
 
     <li id="cross"> <a href="#cross"> × </a> 
 
     </li> 
 
     <li id="recordings"><a href="#recordings">RECORDINGS</a> 
 
     </li> 
 
     <li id="news"><a href="#news">NEWS</a> 
 
     </li> 
 
     <li id="cv"><a href="#cv">CV</a> 
 
     </li> 
 
     <li id="contact"><a href="mailto:123@riseup.net">CONTACT</a> 
 
     </li> 
 
     <li id="fb"><a href="https://facebook.com/123" target=_blank>FB</a> 
 
     </li> 
 

 
    </ul> 
 
</div>