[英]How to get rid of background when something is clicked
我是自適應設計的新手,我想知道如何在單擊SPAN時使背景顏色消失,我的代碼如下:
HTML代碼
<body>
<span class="menu-trigger">MENU </span>
<nav class = "nav-main">
<ul>
<li>
<a href = "#" class = "nav-item"> HOME</a>
</li>
<li>
<a href = "#" class = "nav-item">ABOUT US </a>
</li>
<li>
<a href = "#" class = "nav-item">PORTFOLIO </a>
</li>
<li>
<a href = "#" class = "nav-item">SERVICES </a>
</li>
<li>
<a href = "#" class = "nav-item">CONTACT US </a>
</li>
</ul>
</nav>
</body>
的CSS
@media screen and (max-width: 480px){
.menu-trigger{
display:block;
color:#305782;
background-color: #d5dce4;
padding:10px;
text-align: right;
font-size: 83%;
cursor: pointer;
}
.nav-main {
display:none;
}
.nav-expanded{
display:block;
background-color:none;
}
.nav-main > ul > li{
float:none;
border-bottom: 2px solid #d5dce4;
background-color:black;
}
.nav-main > ul > li:last-child{
border-bottom: none;
}
.nav-main .logo{
display:none;
}
.nav-item:hover {
background-color:forestgreen;
}
}
JQUERY
<script type ="text/javascript">
jQuery( document ).ready(function() {
jQuery(".menu-trigger").click(function(){
jQuery(".nav-main").slideToggle(400, function (){
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
</script>
JS菲德爾
https://jsfiddle.net/k4ytvyef/2/正如您在移動視圖中調整屏幕大小時會注意到的那樣,HOME選項的背景很長,我該如何擺脫呢?
當您說“擺脫背景色”時,是否意味着將其更改為白色? 在這種情況下,請考慮以下示例調用。
$('yourIdOrClass').css({'background-color':'white'});
在您的jQuery代碼下添加此代碼即可解決問題。
window.onresize = function() {
if (window.matchMedia('(max-width: 480px)').matches) {
jQuery(".nav-main").css("background-color", "inherit");
} else
jQuery(".nav-main").css("background-color", "");
jQuery(".nav-main").css("display", ""); // Display navbar back when you change width
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.