单击某物时如何摆脱背景答案

【问题标题】：How to get rid of background when something is clicked单击某物时如何摆脱背景
【发布时间】：2016-06-06 04:24:41
【问题描述】：

我是响应式设计的新手，想知道如何在单击 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 选项的背景很长，我该如何摆脱它？

【问题讨论】：

标签： javascript jquery html css media-queries

【解决方案1】：

在你的 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 
}

【讨论】：

您好，感谢您的回答:) 但是您在我的 JQuery 代码下面是什么意思？
当您回到全宽时解决您的“导航栏消失”问题。 jsfiddle.net/k4ytvyef/7
嗨，再次抱歉，但是当您更改 menu.trigger 的 css 颜色时发生了一些非常奇怪的事情。为什么会发生这种情况？
是的，这是因为当你加载页面时 window.onrezise 没有触发。
别介意我的css只是搞砸了，现在可以工作了，谢谢！

【解决方案2】：

当您说“摆脱背景颜色”时，您是指将其更改为白色吗？在这种情况下，请考虑以下示例调用。

 $('yourIdOrClass').css({'background-color':'white'});

【讨论】：

在适用的情况下使用无代替白色
嗨，我试过了，它确实会在扩大移动尺寸时改变颜色，但问题是当我回到正常尺寸的屏幕时，即桌面导航栏完全消失了。