Fatal编程技术网
  • javascript/
  • Javascript “将类添加到一个”下拉列表“从其他类中删除类”

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

javascript jquery html

Javascript “将类添加到一个”下拉列表“从其他类中删除类”,javascript,jquery,html,Javascript,Jquery,Html,我有一个覆盖菜单，有3个下拉菜单 <ul class="header__overlay-nav"> <li class="js-overlay-dropdown-trigger"> <a class="header__overlay-nav-links" href="#"> After Action Review <i c

我有一个覆盖菜单，有3个下拉菜单

<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>
当您单击其中一个父项（如果它有下拉列表）时，将向子项添加一个类以“激活”下拉列表，它将展开并显示。当前它工作正常，单击后，如果再次单击，则会添加和删除该类

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

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

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

当前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>
提前感谢您的帮助，我知道这里有很多与此问题相关的问题，我做了很多搜索，但找不到任何有助于我处理此特定案例的问题。

如果引起任何问题，我希望这能起作用

<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>


var$overlayDdTrigger=$（'.js overlay下拉触发器'）；
变量$OverlyClasses={
OverlayDactive:'下拉菜单--覆盖处于活动状态'，
按钮：“btn__图标已旋转”，
};
$overlyddtrigger.on（'click'，function（）{
if（$（this）.find（'ul'）.hasClass（'dropdown--overlay处于活动状态'））{
$overlyddtrigger.find（'ul'）.removeClass（$overlyclasses.overlyddatactive）；
$overlyddtrigger.find（'.btn__icon-right'）.removeClass（$overlycasses.buttonico）；
}否则{
$overlyddtrigger.find（'ul'）.removeClass（$overlyclasses.overlyddatactive）；
$overlyddtrigger.find（'.btn__icon-right'）.removeClass（$overlycasses.buttonico）；
$（this.find（'ul'）.addClass（$overlayclass.overlaydadactive）；
$（this.find（'.btn__icon-right'）.addClass（$overlycasses.buttonico）；
}
});
.下拉列表--覆盖{
显示：无；
}
.下拉列表--覆盖处于活动状态{
显示：块！重要；
}

    

  • 

      

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    

    • 

  • 

      

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    

    • 

  • 

      

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    

    •
如果引起任何问题，我希望这能起作用

<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>


var$overlayDdTrigger=$（'.js overlay下拉触发器'）；
变量$OverlyClasses={
OverlayDactive:'下拉菜单--覆盖处于活动状态'，
按钮：“btn__图标已旋转”，
};
$overlyddtrigger.on（'click'，function（）{
if（$（this）.find（'ul'）.hasClass（'dropdown--overlay处于活动状态'））{
$overlyddtrigger.find（'ul'）.removeClass（$overlyclasses.overlyddatactive）；
$overlyddtrigger.find（'.btn__icon-right'）.removeClass（$overlycasses.buttonico）；
}否则{
$overlyddtrigger.find（'ul'）.removeClass（$overlyclasses.overlyddatactive）；
$overlyddtrigger.find（'.btn__icon-right'）.removeClass（$overlycasses.buttonico）；
$（this.find（'ul'）.addClass（$overlayclass.overlaydadactive）；
$（this.find（'.btn__icon-right'）.addClass（$overlycasses.buttonico）；
}
});
.下拉列表--覆盖{
显示：无；
}
.下拉列表--覆盖处于活动状态{
显示：块！重要；
}

    

  • 

      

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    

    • 

  • 

      

    • 

      • 

    • 

      • 

    • 

      • 

    • 

      • 

    

    • 

  • 

      

    • 

      • 

    • 

      •