Question

目前我.menu的背景是红色的。我想要实现的是：在单击之前，此背景不可见。（当点击关闭菜单时，显然会返回状态。

<div class="menu">
    <div class="line"></div>
    <nav>
        <ul>
            <li>
                <a href="">Lorem ipsum dolor sit amet.</a>
            </li>
            <li>
                <a href="">Dicta, aliquam doloremque harum labore.</a>
            </li>
            <li>
                <a href="">Rerum enim ab, distinctio voluptatum?</a>
            </li>
            <li>
                <a href="">Harum doloremque eveniet porro ratione.</a>
            </li>
            <li>
                <a href="">Cupiditate et similique eius deserunt.</a>
            </li>
        </ul>
    </nav>
</div>

menu {
    position: fixed;
    height: 50px;
    width: 50px;
    cursor: pointer;
    top: 30px;
    left: 11px;
    background: #ed1c24;
    opacity: 0.7;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
    z-index: 100;
    overflow: hidden;
}
.menu nav {
    position: fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    opacity: 0;
    -moz-transition: all 250ms linear 250ms;
    -o-transition: all 250ms linear 250ms;
    -webkit-transition: all 250ms linear;
    -webkit-transition-delay: 250ms;
    -webkit-transition: all 250ms linear 250ms;
    transition: all 250ms linear 250ms;
    pointer-events: none;
}

Answer 1

这是您需要的解决方案吗？

.menu:active, .menu:focus, .menu:hover
{
    background-color: red;
}

.menu
{
    background-color: transparent;
}

Answer 2

这是您需要的解决方案吗？首先删除.menu背景颜色，然后点击添加背景颜色red。

$('.menu').click(function(){
   $('.menu').css('background-color','red');
});

Answer 3

$('.menu').click(function(){
   $('.menu').toggleClass('active');
});

.menu.active {
  background:red; 
}

并删除硬编码颜色和不透明度，当您在html代码的主体中的脚本标记中添加jquery代码，并在html标题部分添加jquery库然后jquery代码工作

当在菜单上添加类然后.menu.active css运行时再次单击删除类并删除BG颜色[也检查此] [1]

[在此处输入链接描述] [1]

[1]：

var main=function(){
	$('.menu ul li').click(function()
	{	
		$('li').removeClass("active");
		$(this).addClass("active");
		
	});
};
$(document).ready(main);

@charset "utf-8";
.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  
  float:left;
}

.menu a {
  color: #000;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  display:block;
  padding:10px 20px;
}/* CSS Document */
.menu li:hover a,
.menu li.active a{
	background:#000;
	color:#fff;
}
.dropdownM,
.dropdown{
	border:1px solid #666;
	display:none;
}

 <div class="menu">
            <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <div class="dropdown">
          	<p>press any key</p>
          </div>
          
          <div class="dropdownM">
          	<p>You press M key</p>
          </div>
       </div>
       <script src="jquery.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

点击后可见的背景

3 个答案: