Question

.page-wrapper中的所有内容都应该获得opacity课程 - 这是有效的但按钮应保持不透明度。

我尝试了这个但它不起作用（按钮在页面包装器内）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".page-wrapper:not('button')").toggleClass("opacity")
    });
});
</script>
<style>
.opacity
{
    opacity:0.4;
}
<button>Toggle class</button>

这是一个小提琴http://jsfiddle.net/SY7Np/ display：none对我的网站而不是不透明度更好：0.0

Answer 1

你几乎得到它，你要么错过一个空格，要么'＆gt; “

$(document).ready(function () {
  $("button").click(function () {
     $(".page-wrapper > :not(button)").toggleClass("opacity")
 });
});

另外你可以做，取决于嵌套：

     $(".page-wrapper :not(button)").toggleClass("opacity")

see fiddle

Answer 2

一种方法是：

.opacity,
.opacity :not(button) {
    color: rgba(0,0,0,0.2);
    background-color: rgba(255,255,255,0.2);
}

JS Fiddle demo

参考文献：

:not() pseudo-class。

没有按钮元素的jquery选择器

2 个答案: