Question

我有一个父元素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，但隐藏其中的一个元素？

Answer 1

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。 / p>

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

与不透明度不同，子元素可以从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>

Answer 2

jQuery("#mmm-a").not("#mmm-b") 意思是选择#mmm-a而不是mmm-b，而您需要从孩子列表中排除特殊孩子。

改为使用此

$("#mmm-a :not(#mmm-b)").css("visibility", "visible");

#mmm-a {visibility: hidden}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mmm-a">
  <div>1</div>
  <div id="mmm-b">#mmm-b</div>
  <div>3</div>
</div>

如何使用jQuery在儿童选择器中排除儿童？

2 个答案: