javascript - 为什么我的toggle()的两个option都在执行？

Question

我制作了一个带有链接的按钮，<a> ，我想用它来显示或不显示某些元素。对于这个目标，我认为 .toggle()是一个不错的选择。

$('#filter_btn').click(function() {
  $('.filters_container').toggle(function() {
    $(".filters_container").css({
      display: "flex"
    });
  }, function() {
    $(".filters_container").css({
      display: "none"
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="filter_btn">Nodes</a>

但是使用这段代码，当我按下按钮时它显示 filters_container但他们马上又变得不可见了。为什么要执行切换功能的两个部分？

非常感谢。

Answer 1

$('#filter_btn').click(function() {
   $(".filters_container").toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="filter_btn">Nodes</a>
<span class="filters_container" style="display: none;">test</span>

简单的切换功能使用它。