javascript - 如何使用javascript再次关闭下拉菜单？

Question

再次单击打开下拉菜单后，如何关闭它？如果现在打开后点击它，它不会关闭。我找到了一些解决方案并尝试了，但我无法让它与我的代码一起使用。

$(document).ready(function () {
            $(".accordion > a").on("click", function () {
                if ($(this).hasClass('active')) {
                    $(this).removeClass("active");
                    
                    
                    $(this).addClass("active");
                    $('.accordion .content').slideUp(200);
                    $(this).siblings('.accordion .content').slideDown(200);
                }
            });
        });

.col {
  width: 33.3%;
  float: left;
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" data-id="231">
  <a href="javascript:void(0);" class="grider clearfix active">
  1.
  </a>
  <div class="content clearfix" style="display:none">
    <div class="grider-2">
      xxxx
    </div>
  </div>
</div>
<br><br>
<div class="accordion" data-id="232">
  <a href="javascript:void(0);" class="grider clearfix active">
  2.
  </a>
  <div class="content clearfix" style="display:none">
    <div class="grider-2">
      yyyy
    </div>
  </div>
</div>

标签： javascripthtml

Answer 1

请试试这个：

$(document).ready(function () {
    $(".accordion > a").on("click", function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass("active");
            $('.accordion .content').slideUp(200);
        } else {
            $(".accordion > a").removeClass("active");
            $('.accordion .content').slideUp(200);

            $(this).addClass("active");
            $(this).siblings('.accordion .content').slideDown(200);
        }
    });
});

其他相同