javascript - 如何使用jQuery在 child 选择器中排除 child ？

我有一个父元素div #mmm-a通过以前的visibility函数设置为hidden，on click，并且我正在使用以下代码使它重新显示在页面上（单击）：

jQuery("#mmm-a").css("visibility", "visible").fadeTo(300, 1);

这可以正常工作，但是当我尝试从其父div #mmm-b中排除一个子#mmm-a无效时，我尝试了此方法（以及其他方法）：

jQuery("#mmm-a").not("#mmm-b").css("visibility", "visible").fadeTo(300, 1);

我的代码有什么问题？如何重新显示整个div，但隐藏其中的一个元素？

最佳答案

jQuery("#mmm-a")仅选择ID为“ mmm-a”的单个元素。 .not("#mmm-b")不会从该选择中排除任何内容-它仍然是单元素列表。 （唯一可行的方法是，如果同一元素具有两个ID：.not()将排除它，最后选择零元素-但这是不可能的，因为一个元素不能具有两个ID。）

排除单个子元素的多元素选择看起来更像$('#mmm-a').find(':not(#mmm-b)')或$('#mmm-a :not(#mmm-b)') －它们将返回mmm-a的所有子元素的列表，这些元素不是mmm-b。

但这也无济于事，因为您使用的是fadeTo动画元素的不透明度，而不是其可见性。不透明度始终会影响子元素：不透明度为零的元素将始终将其所有内容都设为不透明度为零，因此不可能从中排除子元素。

与不透明度不同，子元素可以从visibility规则中排除：

#a {visibility:hidden}
#b {visibility:visible}

<div id="a"> hidden parent
  <div id="b">visible child</div>
</div>

...但是visibility无法设置动画（“可见”和“隐藏”之间没有部分状态。）

如果需要父级的不透明度进行动画处理而子级保持可见，则唯一的方法是重组HTML，使要保持可见的元素不是要隐藏的子元素。

编辑：但是，根据下面的注释，您想以其他方式做到这一点：


  我想让子元素保持隐藏状态，同时使div的其余部分再次淡出至可见状态，以便以后处理子可见性


...这要容易得多！

$('#go').on("click", function() {
  $('#b').css("visibility","hidden"); // hide child element
  $('#a')
    .css("opacity","0") // set opacity to 0 first, so the animation will work later
    .css("visibility","visible") // set visiblity to visible
    .fadeTo(300, 1) // animate opacity from 0 to 1
});

#a, #v {visibility: hidden}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"> parent made visible
  <div id="b">child stays hidden</div>
</div>
<button id="go">Click me</button>

关于javascript - 如何使用jQuery在 child 选择器中排除 child ？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52234470/