隐藏元素中的元素未隐藏

Question

在尝试建立一个页面时，我可以使用hide / show函数过滤作业和办公室的类型，我发现如果隐藏了一个元素，则该元素下方的一个元素被“隐藏”了起来，但它没有躲起来 换句话说，仅当显示实际元素时，隐藏才有效。

这是代码，用于复制，隐藏Office 2，然后隐藏开发人员，然后再次显示Office 2。 开发人员（应“隐藏”）显示在Office 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类。 当显示它时，您还删除了hidden 。

Answer 3

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

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

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