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>

单击功能在第一次单击时不起作用

1 个答案: