Question

我有一个叠加菜单，有3个下拉菜单。

当您点击其中一个父项时，如果它有一个下拉列表，则会向该子项添加一个类以“激活”该下拉列表，并将其展开并显示。目前它工作正常，点击该类会被添加并删除，如果再次点击。

问题是目前您可以同时激活和打开所有下拉菜单。我需要做的是一次只能有一个下拉列表。

如果一个下拉列表处于活动状态，并且用户单击另一个下拉列表，则原始活动下拉列表将关闭，新单击的下拉列表将变为活动状态。

此外，如果下拉列表处于活动状态且用户再次点击同一父项，则下拉列表将关闭。

当前HTML

我排除了除下拉列表之外的所有其他列表项。

<ul class="header__overlay-nav">

              <li class="js-overlay-dropdown-trigger">
                <a class="header__overlay-nav-links" href="#">
                  After Action Review
                  <i class="fa fa-angle-down btn__icon-right"></i>
                </a>

                <ul class="dropdown--overlay">

                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Overview
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Review Form
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Performance Card
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Recent Recordings
                    </a>
                  </li>
                </ul>
              </li>



              <li class="js-overlay-dropdown-trigger">
                <a class="header__overlay-nav-links" href="#">
                  Downloads
                  <i class="fa fa-angle-down btn__icon-right"></i>
                </a>
                <ul class="dropdown--overlay">    
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      100 Day Challenge App
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Desktop Wallpapers
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Screen Savers
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Forms
                    </a>
                  </li>
                </ul>
              </li>


              <li class="js-overlay-dropdown-trigger">
                <a class="header__overlay-nav-links" href="#">
                  Inspiration
                  <i class="fa fa-angle-down  btn__icon-right"></i>
                </a>
                <ul class="dropdown--overlay">    
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Get Your Mojo Working
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links href="#">
                      Game Changers
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Bold Actions - Big Rewards
                    </a>
                  </li>
                  <li class="dropdown__item">
                    <a class="dropdown__links" href="#">
                      Motivational Videos
                    </a>
                  </li>
                </ul>
              </li> 
          </ul>

当前Jquery

这是我用来进行活动类的基本切换的原始Jquery，基本上只是在单击的触发器的子UL上使用toggleClass。

注释掉了，我之前尝试删除所有活动类，然后在我添加的click元素上切换类，但是删除所有类，只是将其添加到单击的类中，这使得无法通过单击关闭下拉列表同样的触发器。

var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');

var $overlayClasses = {

    // Active css Class for dropdowns in Main Overlay
    OverlayDdActive: 'dropdown--overlay-is-active',

    ButtonIconIsRotated: 'btn__icon-is-rotated',
  };

  $overlayDdTrigger.on('click', function() {

    if (_isMobile) {
      // Attempt to to remove all active classes on UL's prevents dropdown from 
      // being able to close if the same trigger is clicked twice

      // $('ul.dropdown--overlay-is-active').removeClass($overlayClasses.OverlayDdActive);

      $(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);

      $(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);
    }
  });

感谢您提前获得帮助，我知道这里有很多与此问题相关的问题，我做了很多搜索，但找不到任何可以帮助我解决这个具体案例的问题。

Answer 1

我希望如果它引起任何问题，这将会发挥作用。

<html>
<body>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
        var $overlayDdTrigger = $('.js-overlay-dropdown-trigger');

        var $overlayClasses = {
            OverlayDdActive: 'dropdown--overlay-is-active',
            ButtonIconIsRotated: 'btn__icon-is-rotated',
          };

        $overlayDdTrigger.on('click', function() {

          if($(this).find('ul').hasClass('dropdown--overlay-is-active')){

            $overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
            $overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
          }else{

            $overlayDdTrigger.find('ul').removeClass($overlayClasses.OverlayDdActive);
            $overlayDdTrigger.find('.btn__icon-right').removeClass($overlayClasses.ButtonIconIsRotated);
            $(this).find('ul').addClass($overlayClasses.OverlayDdActive);
            $(this).find('.btn__icon-right').addClass($overlayClasses.ButtonIconIsRotated);
          }
        });
        </script>
            <style>
        .dropdown--overlay{
        display:none;
        }
        .dropdown--overlay-is-active{
        display: block !important;
        }
        </style>
        <ul class="header__overlay-nav">

        <li class="js-overlay-dropdown-trigger">
          <a class="header__overlay-nav-links" href="#">
            After Action Review
            <i class="fa fa-angle-down btn__icon-right"></i>
          </a>

          <ul class="dropdown--overlay">

            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Overview
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Review Form
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Performance Card
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Recent Recordings
              </a>
            </li>
          </ul>
        </li>



        <li class="js-overlay-dropdown-trigger">
          <a class="header__overlay-nav-links" href="#">
            Downloads
            <i class="fa fa-angle-down btn__icon-right"></i>
          </a>
          <ul class="dropdown--overlay">    
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                100 Day Challenge App
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Desktop Wallpapers
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Screen Savers
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Forms
              </a>
            </li>
          </ul>
        </li>


        <li class="js-overlay-dropdown-trigger">
          <a class="header__overlay-nav-links" href="#">
            Inspiration
            <i class="fa fa-angle-down  btn__icon-right"></i>
          </a>
          <ul class="dropdown--overlay">    
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Get Your Mojo Working
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links href="#">
                Game Changers
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Bold Actions - Big Rewards
              </a>
            </li>
            <li class="dropdown__item">
              <a class="dropdown__links" href="#">
                Motivational Videos
              </a>
            </li>
          </ul>
        </li> 
        </ul>

</body>
</html>

Answer 2

想出一个按需运作的解决方案。

$overlayDdTrigger.on('click', function() {

    if (_isMobile) {

      // Toggle Class On clicked Element
      $(this).children('ul').toggleClass($overlayClasses.OverlayDdActive);

      // Remove all Active Dropdowns From all Siblings
      $(this).siblings().children('ul').removeClass($overlayClasses.OverlayDdActive);

      $(this).find('.btn__icon-right').toggleClass($overlayClasses.ButtonIconIsRotated);

    }

  });

将类添加到一个下拉列表中删除其他类

2 个答案: