jQuery manual toggle not working

Question

Я пытаюсь создать ручной переключатель, чтобы скрыть некоторые теги div. Но, похоже, он ничего не делает. Я добавил предупреждения, чтобы узнать, даже если они появятся, но безрезультатно. Использование простого переключателя(); функция работает.

На самом деле я на самом деле пытаюсь понять, как показать или скрыть все div. Поскольку на данный момент, если некоторые divs открыты, а некоторые divs закрыты, использование toggle просто меняет их (так что отображение divs скрыто, и теперь отображаются скрытые divs). Есть идеи?

//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'); 

     } 
    ); 

Для позабавиться, переключение двух див на основе наведения другое:

$('#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(); 
});