元素不会隐藏

在试图建立一个网页，我可以过滤作业使用隐藏/显示功能的类型和办公室，我发现，如果一个元素是隐藏的，那么元素的元素下方被“告知”隐藏，它实际上并不隐藏。换句话说，只有在显示实际元素时才隐藏起作用。元素不会隐藏

下面是代码，复制，隐藏办公室2，然后隐藏开发商，再展办公室2一次。内办公2.

开发商（其中“应该”被隐藏）显示是否有办法解决？看起来jquery也会隐藏“子”元素，但事实并非如此。

<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>

来源

2010-07-24 user401214

演示在这里 - http://jsfiddle.net/yFm84/ – 2010-07-24 20:11:00

除了hide()/show()，使用名为hidden类，与CSS：

.hidden { 
    display: none; 
}

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

来源

2010-07-24 20:15:27

好吧，那有效，除了我必须删除转换速度从1000到null或将隐藏/显示命令之前添加/删除类。问题是，如果我不这样做，那么这个空间仍然会显示失踪的开发人员在哪里。（要复制这个，我发现我必须做几次，在我看来，我可能会错过一些东西，如果这是混乱，我可以提交代码）否则，主要目标是满足，我只是失去了过渡效应。谢谢 – user401214 2010-07-24 20:52:05

没有必要把它归结为零。只需在回调函数（'show（1000，callback）'/'hide（1000，callback）'）中添加/删除类。这样，在显示/隐藏执行后，类将被添加/删除。 – 2010-07-24 21:19:25

@Gert G：问题是'hide（）'不会运行已经隐藏的元素，所以回调也不会运行，同时删除show回调中的类意味着它会立即出现在第二次:) – 2010-07-24 22:49:50

由于.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(); 
    } 
});

You can try out a demo here。我们只是占已:hidden元素将无法运行动画并跳转至他们通过调用.hide()没有动画速度做display: none;。

来源

2010-07-24 20:33:50

好的，再看看你的答案。这在我最近的评论中解决了这个问题。谢谢...我将不得不阅读过滤器命令。 – user401214 2010-07-24 20:55:35

@ user401214：欢迎:)请务必通过解决此问题旁边的复选标记接受关于此问题和未来问题的答案:) – 2010-07-24 21:02:21

@ user401214 - 是的，请将Nick的答案标记为接受的答案。这比我的方式更容易...而且效果很好。 – 2010-07-24 23:11:11

这里有一个清洁，简单的解决方案：

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

的隐藏/显示jQuery中回调做火，即使函数本身没有做它的事，由于父元素。在jQuery中使用上述方法时，无论元素是否处于隐藏父元素中，元素都将隐藏，同时如果显示它们也执行通常的平滑过渡。

来源

2012-06-17 03:17:39 Mahn

元素不会隐藏

回答

相关问题