元素不會隱藏

在試圖建立一個網頁，我可以過濾作業使用隱藏/顯示功能的類型和辦公室，我發現，如果一個元素是隱藏的，那麼元素的元素下方被「告知」隱藏，它實際上並不隱藏。換句話說，只有在顯示實際元素時才隱藏起作用。元素不會隱藏

下面是代碼，複製，隱藏辦公室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

元素不會隱藏

回答

相關問題