jquery - jQuery ドロップダウン メニュー - slideToggle

Question

$(document).ready(function() {
  $('.cats_showall').click(function() {
    $('.cats_dropdown li').slideToggle();
  });
});

.cats_dropdown li {
  display: none;
}

.cats_dropdown>li:first-child {
  display: list-item;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="cats_dropdown">
  <li>Category 1 - <a href="#" class="cats_showall">Show all</a></li>
  <li>Category 2</li>
  <li>Category 3</li>
  <li>Category 4</li>
</ul>

しかし、うまくいきません。助けてください ：）

Answer 1

必要事項をきちんと説明していただけると助かります。私の理解によれば、SlideToggle() 効果を適用すると、[すべて表示] リンクが表示されるはずです。これをチェックして、

$(document).ready(function(){
   $('.cats_showall').click(function(){
      $('.cats_dropdown li:not(:first)').slideToggle();           
   });
});

Answer 2

これにより、リスト項目の箇条書きが失われなくなります。

$(document).ready(function(){
        $('.cats_showall').click(function(){
                $('.cats_dropdown li:not(:first)').slideToggle(function() {
                    if($(this).is(':visible')) {
                        $(this).css('display','list-item');
                    }
                });
        });
});