Div出現onclick，消失onclick

Question

 $(function() { 
  $('.dropTitle').click(function() { 
    $('.columnCenter ul ul').css('display', 'block'); 
  }); 
                               
}); 

我在這裏有一個點擊功能。當我點擊.dropTitle時，.columnCenter顯示'block'。我怎樣才能讓它再次點擊.dropTitle，它會切換到display：none;？

我希望能夠在顯示：塊之間來回切換顯示：點擊.dropTitle時無顯示。

所有幫助將不勝感激，謝謝！

Answer 1

只需使用toggle：

$(function() { 
    $('.dropTitle').click(function() { 
     $('.columnCenter ul ul').toggle(); 
    });       
}); 

Working example.

Answer 2

它可能會更容易在這裏使用一個實用工具類，例如：

.is--hidden { 
    display: none; 
}   

然後切換該點擊課程：

$('.dropTitle').click(function() { 
    $(this).toggleClass('is--hidden') 
} 

Answer 3

我不會只用.toggle()，但我會用.on()，以及...

$(function() { 
    $(document).on('click', '.droptitle', function() { 
     $('.columnCenter ul ul').toggle(); 
    });       
});