Функция первого нажатия не работает при первом нажатии

Question

Я скрываю подменю по умолчанию для мобильного просмотра и реализую тумблер, показывать подменю только после нажатия на заголовок.

(function($) {
  $(document).ready(function() {
    if ($(window).width() <= 639) {
      $('.footer-widgets .footer-widget').each(function(e, elm) {
        var ac = $(this).find('.widget-title');
        $(ac).next('div').addClass('closed');
        $(ac).on('click', function(a) {
          $(this).toggleClass('active');
          $(this).next('div').toggleClass('closed');
          $(this).next('div').slideToggle();
          $(elm).siblings().find('.widget-title').next('div').addClass('closed');
          $(elm).siblings().find('.widget-title').next('div').slideUp();

        });
      });
    }
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="footer-widgets d-lg-flex">
  <div class="footer-widget footer-widget-3">
    <div id="nav_menu-1" class="widget widget_nav_menu">
      <span class="gamma widget-title">Contact</span>
      <div class="menu-footer-section-3-container closed">
        <ul id="menu-footer-section-3" class="menu">
          <li id="menu-item-1628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1628">
            <a href="/Contact/">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-widget footer-widget-4">
    <div id="nav_menu-5" class="widget widget_nav_menu">
      <span class="gamma widget-title">Resources</span>
      <div class="menu-footer-section-4-container closed">
        <ul id="menu-footer-section-4" class="menu">
          <li id="menu-item-1792" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1792">
            <a href="/blogs/">Blogs</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Css Код

.footer-widgets .footer-widget .closed {
    display: none;
}

В моем коде - функция onclick не работает при первом нажатии.

Смотрите здесь - https://jsfiddle.net/vikastyagi87/ye2qL0ta/1/

Answer 1

 $(document).ready(function () {
        if ($(window).width() <= 639) {
            $('.footer-widgets .footer-widget').each(function (e, elm) {
                $('.widget_nav_menu .closed').css('display', 'none');
                var ac = $(this).find('.widget-title');
                $(ac).on('click', function (a) {
                    $(this).removeClass('active');
                    $(this).next('div').addClass('closed');
                    $(this).next('div').slideToggle();
                    $(elm).siblings().find('.widget-title').next('div').addClass('closed');
                    $(elm).siblings().find('.widget-title').next('div').slideUp();

                });
            });
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="footer-widgets d-lg-flex">
  <div class="footer-widget footer-widget-3">
    <div id="nav_menu-1" class="widget widget_nav_menu">
      <span class="gamma widget-title">Contact</span>
      <div class="menu-footer-section-3-container closed">
        <ul id="menu-footer-section-3" class="menu">
          <li id="menu-item-1628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1628">
            <a href="/Contact/">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-widget footer-widget-4">
    <div id="nav_menu-5" class="widget widget_nav_menu">
      <span class="gamma widget-title">Resources</span>
      <div class="menu-footer-section-4-container closed">
        <ul id="menu-footer-section-4" class="menu">
          <li id="menu-item-1792" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1792">
            <a href="/blogs/">Blogs</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>