即使在导航到另一个页面后，过滤器下拉栏也会保持折叠状态

Question

所以我正在设计一个网站，其中有一个过滤下拉栏，可以通过类别过滤博客文章。我现在面临的问题是，一旦我点击过滤条，下拉列表就会崩溃，这是正确的。但是当我从过滤器栏中选择一个类别时，它会导航到该类别页面，但过滤器栏会保持折叠状态。我想在导航到另一个类别页面后关闭它。

这是我正在使用的jQuery -

    $(document).ready(function() {
      $(".blog-filter").insertAfter(".header-row-2");
        if ($('.bold-filter-icon').length > 0) {
        $('.blog-filter').show();
        $('.blog-filter-btn').attr('data-toggled', 'on');
        $('.bold-filter-icon').attr('href',
        '/@SiteMap.CurrentNode.Url.Split(' / ').Last()');
        $(".blog-filter-btn span").removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down');}
       $('.header-row-2').on('click', '.blog-filter-btn', function()
       {
       if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') ==='off')
           {
            $(this).attr('data-toggled', 'on');
            $(this).find('span').removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down');
            $('.blog-filter').show();
           }

        else if ($(this).attr('data-toggled') === 'on' || $('.blog-filter').is(':visible')) 
           {
           $(this).attr('data-toggled', 'off');
           $(this).find('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
           $('.blog-filter').hide();
        }  
     });
  });