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