jQuery手動切換不起作用

Question

我想創建一個手動切換來隱藏一些div標籤。但它似乎沒有做任何事情。我添加了警報，看看他們是否顯示，但無濟於事。使用簡單的toggle（）;功能可以工作。

事實上，我實際上正在努力解決如何顯示或隱藏所有div。因爲目前，如果一些div打開並且一些div被關閉，那麼使用toggle就會將它們交換掉（因此顯示的div是隱藏的，隱藏的div正在顯示）。有任何想法嗎？

//button to show/hide rows 
    $('#hideRows').live('click', function() { 
     $('.dragbox').each(function(){ 
      //$(this).find('.dragbox-content').toggle(); 
      $(this).find('.dragbox-content').toggle(
       function() { 
        //$(this).css({"display":"none"}); 
        alert("hide"); 
       }, 
       function() { 
        //$(this).css({"display":"block"}); 
        alert("show"); 
       } 
      ); 
     }); 
    }); 

Answer 1

如果你有這樣的：

<div id='div1'></div> 
<div id='div2'></div> 
<div id='div3'></div> 
<div id='div4'> 
    <div id='div5'></div> 
</div> 

和CSS一樣：

.hideDiv 
{ 
    display: none; 
} 

你可以做的東西一樣

$('#div1').addClass('hideDiv'); //hides the div 
$('#div2').toggle('hideDiv');// toggles hidden or not hidden 
$('#div4').children('div').addClass('hideDiv');// hides the child 

把那些在功能，複雜的選擇或者你需要的任何東西：

$('#div3').hover(
     function() 
     { 
      $('#div1').addClass('hideDiv'); 
     }, 
     function() 
     { 
      $('#div1').removeClass('hideDiv'); 

     } 
    ); 

對於一些樂趣，撥動根據其他懸停兩個div：

$('#div3').hover( 
     function() 
     { 
      $('#div1').addClass('hideDiv'); 
      $('#div2').removeClass('hideDiv'); 

     }, 
     function() 
     { 
      $('#div1').removeClass('hideDiv'); 
      $('#div2').addClass('hideDiv'); 
     } 
    ); 

注意另一個選項.toggle()成爲.toggleClass()這一點。

Answer 2

您似乎一遍又一遍地重新綁定僞事件處理程序toggle。試試這個：

$('.dragbox .dragbox-content').toggle(
    function() { 
     $(this).css({"display":"none"}); 
    }, function() { 
     $(this).css({"display":"block"}); 
}); 

$('#hideRows').live('click', function() { 
    $('.dragbox .dragbox-content').click(); 
});