隐藏元素中的元素不会被隐藏

Question

在尝试构建一个可以使用隐藏/显示功能过滤工作类型和办公室的页面时，我发现如果隐藏某个元素，则该元素下方的元素会被“告知”隐藏，但事实并非如此。实际上隐藏。换句话说，隐藏仅在显示实际元素时才起作用。

这是代码，要复制，隐藏办公室 2，然后隐藏开发人员，然后再次显示办公室 2。开发人员（“应该”隐藏）显示在办公室 2 中。

有没有办法解决这个问题？看起来 jquery 也会隐藏“sub”元素，但事实并非如此。

<input  type="checkbox" id=office1 name="test"  class="link1" />Office 1<BR>
<input  type="checkbox" name="office2"  checked='true' class="link2"/>Office 2<BR>
<input  type="checkbox" name="office3"  checked='true' class="link3" />Office 3<BR>
<input  type="checkbox" name="developer"  checked='true' class="link4" />Developer<BR>
<input  type="checkbox" name="receptionist"   checked='true' class="link5" />Receptionist<BR>
<input  type="checkbox" name="manager"   checked='true' class="link6" />Manager<BR>
<table border='1'>
    <tr>
        <td class="toggle-item-link1"><B>Office 1</B><HR>
        <div class="toggle-item-link6"><BR>Manager</div>
        <div class="toggle-item-link6"><BR>Manager</div>
        <div class="toggle-item-link6"><BR>Manager</div>
        </td>
    </tr>
    <tr >
        <td class="toggle-item-link2"><B>Office 2</B><HR>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link6"><BR>Developer</div>
        <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>
    <tr>
        <td class="toggle-item-link3"><B>Office 3</B><HR>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link4"><BR>Developer</div>
        <div class="toggle-item-link5"><BR>Receptionist</div>
        </td>
    </tr>

        <td>
        </td>
    </tr>
</table>
<script>
$(document).ready(function() {

    $('[class^=link]').click(function() {
        if ($(this).attr("checked")) {
            var $this = $(this);
            var x = $this.attr("className");
            //when 'checked'

            $('.toggle-item-' + x).show(1000);

            return;
        }
        //when 'unchecked'
        var $this = $(this);
        var x = $this.attr("className");

        $('.toggle-item-' + x).hide(1000);
    });

});
</script>

Answer 1

由于具有动画速度的 .hide() 只会在可见的情况下运行元素，您也可以在其中添加隐藏元素的情况，如下所示（这里还有一些优化，只是减少代码）：

$('[class^=link]').click(function()  {
    var x =  $(this).attr("className");
    if (this.checked) {
        $('.toggle-item-'  + x).show(1000);
    } else {
        $('.toggle-item-'  + x).hide(1000).filter(':hidden').hide();
    }
});

您可以在此处尝试演示。我们只是考虑已经存在的 :hidden 元素不会通过调用 执行 display: none; 动画并跳到它们>.hide() 没有动画速度。

Answer 2

除了 hide()/show() 之外，还可以使用名为 hidden 的类，其 CSS 如下：

.hidden {
  display: none;
}

隐藏项目时，还添加hidden类。当您显示它时，您还删除了隐藏。

Answer 3

这是一个更干净、更简单的解决方案：

$("#randomdiv").hide(1000, function() { $(this).css("display", "none"); });

即使函数本身由于父元素而没有执行其操作，jQuery 中的 hide/show 回调也会触发。将上述方法与 jQuery 结合使用，无论元素是否位于隐藏的父元素中，元素都会隐藏，同时如果显示它们也会执行通常的平滑过渡。