避免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>