javascript - 为什么我的toggle()的两个选项都执行了？

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，但它们会立即再次变得不可见。为什么要执行切换功能的两个部分？

非常感谢。

标签： javascriptjquery

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>

简单的切换功能使用它。