2 jQuery toggleClass 显示 div - 一个 link 关闭另一个

Question

我有 2 个 div，我使用下面的 jQuery toggleClass 切换和显示：

脚本 1

<script type="text/javascript">
        $(function ($) {
        var search_wrapper = $('.search-options');
           $('a.sort').click(function () {
              $(this).toggleClass('show');
              search_wrapper.slideToggle(400);
              $("i",this).toggleClass("fa-search fa-times");
              return false;
          });
        });
</script>

脚本 2

<script type="text/javascript">
        $(function ($) {
        var search_wrapper = $('.search-filters');
            $('a.filter').click(function () {
              $(this).toggleClass('show');
              search_wrapper.slideToggle(400);
              $("i",this).toggleClass("fa-search fa-times");
              return false;
            });
        });
</script>

我的问题

当点击一个 link 然后再点击另一个时，两个 div 都会打开。

我想要的是当点击一个然后点击另一个时，第一个关闭，反之亦然。

我怎样才能做到这一点？

Answer 1

此外，在 a.sort 中使用 $('a.filter').toggleClass('show') 点击函数

并在 a.filter 函数中使用 $('a.sort').toggleClass('show')。

这是合并后的脚本：

$(function ($) {
    var search_wrapper = $('.search-options');
    $('a.sort').click(function () {
        $('a.filter').toggleClass('show')
        $(this).toggleClass('show');
        search_wrapper.slideToggle(400);
        $("i",this).toggleClass("fa-search fa-times");
        return false;
    });
    var search_wrapper = $('.search-filters');
    $('a.filter').click(function () {
        $('a.sort').toggleClass('show')
        $(this).toggleClass('show');
        search_wrapper.slideToggle(400);
        $("i",this).toggleClass("fa-search fa-times");
        return false;
     });
});

2 jQuery toggleClass 显示 div - 一个 link 关闭另一个

2 jQuery toggleClass's showing div's - one link closing the other

jquery

function

toggle

slidetoggle