jquery toggleClass 无结果

Question

我有一个菜单，可在单击时滑动切换进出，但同时我希望菜单周围有一个灰色背景以淡入淡出切换。我不想使用 fadeToggle 而是使用 toggleClass，以便能够在必要时添加更多样式。

toggleClass 根本不起作用，我不明白为什么。非常感谢您的帮助！！

$(document).ready(function(e) {
    $('#button').click(function() {
  $('#menu').slideToggle();
  $('#bgr').toggleClass('display');
 });
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
#bgr {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block; 
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

Answer 1

尝试将 !important 添加到您的 css

.display {
    display:block !important; 
    opacity:1 !important;
}

$(document).ready(function(e) {
  $('#button').click(function() {
    $('#menu').slideToggle();
    $('#bgr').toggleClass('display');
  });
});

    .display {
      display: block;
      opacity: 1;
    }
    #menu {
      display: none;
      position: absolute;
      top: 40px;
      right: 10%;
      z-index: 10;
      width: 30%;
      height: 400px;
      background: lightblue;
    }
    #bgr {
      display: none;
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 100%;
      width: 100%;
      background: grey;
      -webkit-transition: opacity 1s;
      transition: opacity 1s;
    }
    #button {
      cursor: pointer;
    }
    #button p {
      position: absolute;
      top: 0;
      right: 10%;
      z-index: 100;
      margin: 0;
      color: lightblue;
      font-size: 2em;
    }
    .display {
      display: block !important;
      opacity: 1 !important;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="button">
  <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

Answer 2

问题是id选择器#bgr比class选择器.display更具体，所以当两者冲突时它的样式"win"。 toggleClass() 是 adding/removing class，但这并不重要，因为 #bgr 中的 display: none 覆盖了 display: block 来自 .display.

虽然!important is rarely a great idea，它确实解决了这里的问题，允许class样式覆盖id样式：

.display {
    display:block !important; 
    opacity:1 !important;
}

$(document).ready(function(e) {
    $('#button').click(function() {
  $('#menu').slideToggle();
  $('#bgr').toggleClass('display');
 });
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
#bgr {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block !important; 
    opacity:1  !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

Answer 3

HTML: 
<div class="#bgr"></div>

css:
#bgr{
    opacity:0;
    background-color: grey;
    transition: all 0.2s linear;
}

.fadein{
    opacity: 1;
}

JS:
$('#bgr').toggleClass('fadein');

试试这个。它会起作用的！

Answer 4

关键是串联使用 visibility 和 opacity 以获得流畅的动画，并且在显示声明中更具体地使用 #bgr.display{} 而不是

http://jsfiddle.net/cceg9Ldp/4/

CSS

button {
    position:relative;
    z-index:2;
}

#bgr {
    opacity:0;
    visibility:hidden;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:all 1s;
    transition:all 1s;
}

 #bgr.display {
    opacity:1;
    visibility:visible;
}

HTML

<button>Click Me</button>
<div id="bgr"></div>

jQuery

$('button').click(function(){
    $('#bgr').toggleClass('display');
});

Answer 5

如果你使用"absolute" 属性那么你可以省略"display:none"来达到平滑过渡的效果。我已经为您编辑了#bgr 和.display。切换 class 与您一起为您的黑暗 BG 实现平滑过渡。

您编写的 JS 将适用于此示例。

#bgr {
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
   
.display {
    opacity:1!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr"></div>

Answer 6

我认为你应该定义一个新样式 no-display

$(document).ready(function(e) {
    $('#button').click(function() {
  $('#menu').slideToggle();
  $('#bgr').toggleClass('display');
 });
});

#menu {
    display:none;
    position: absolute; 
    top:40px; 
    right: 10%;
    z-index:10; 
    width: 30%; 
    height:400px;
    background: lightblue;}
.no-display {
    display:none;
    opacity:0;
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1;
    height: 100%;
    width:100%;
    background: grey;
    -webkit-transition:opacity 1s;
    transition:opacity 1s;
}
#button {cursor: pointer;}
#button p 
{   position: absolute;
    top:0;
    right:10%;
    z-index:100;
    margin:0;
    color:lightblue;
    font-size:2em;
}
.display {
    display:block; 
    opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="button">
 <p>menu</p>
</div>

<div id="menu"></div>
<div id="bgr" class="no-display"></div>

jquery toggleClass 无结果

jquery toggleClass no result

jquery

css

toggleclass