jQuery 双下拉导航问题

Question

我为 wordpress 多站点创建了一个 jQuery 下拉导航，导航效果很好，但是一旦出现一次下拉，用户点击另一个下拉菜单 link导航，现有的下拉菜单仍然显示如下：Double Drop Down Occurence

我想删除下拉列表，使其在单击导航中的另一项时不会出现两次，这样一次只显示一个，如下所示：

这是构成导航的代码：

<script>
jQuery(document).ready(function( $ ) {

jQuery( ".divisionslink" ).click(function() {
jQuery( ".divisions-submenu" ).toggleClass( "heightnav" );
}); 
jQuery( ".aboutlink" ).click(function() {
jQuery( ".about-submenu" ).toggleClass( "heightnav" );
});
jQuery( ".productlinks" ).click(function() {
jQuery( ".products-submenu" ).toggleClass( "heightnav" );
});
jQuery( ".serviceslink" ).click(function() {
jQuery( ".services-submenu" ).toggleClass( "heightnav" );
});

});
</script>
<!-- Dropdown Script -->

.navigation-desktop--submenu {
    // border-bottom: 2px solid $color-dufaylite;
    &.heightnav {
        height: 0;
        @include single-transition(all, 0.5s);
    }
    display: none;
    @include contrasted($color-grey-medium, $color-navy-light, $color-navy-dark);
    overflow: auto;
    @media #{$medium-up} {
        display: flex;
        height: 3rem;
        @include single-transition(all, 0.5s);
    }
    align-items: center;
    justify-content: space-between;
    font-weight: 300;
    ul {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin: 0;
        li {
            display: flex;
            button {
                background-color: inherit;
                color: inherit;
                border-radius: 0;
            }
            a, button {
                font-size: 14px;
                text-decoration: none;
                padding: 0.50rem;
                color: $color-navy-light;
                @include single-transition(color, 0.125s);
                &:hover, &:focus {
                    color: white;
                    @include single-transition(color, 0.125s);
                }
            }
        }
        &.navigation {
            li {
                border-left: 1px solid;
            }
        }
    }
}

<!-- Main Navigation Link -->
<li class="divisionslink"><a href="#">Divisions<img style="padding-left: 5px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/navigation/icon-dropdown.png" /></a></li>

<li class="aboutlink"><a href="#">About<img src="<?php echo get_template_directory_uri(); ?>/images/icons/navigation/icon-dropdown.png" /></a></li>
     
<!-- Dropdown Submenu -->
<section class="about-submenu navigation-desktop--submenu heightnav">
 <div class="row submenu">
  <div class="small-12 columns">
   <nav class="desktop-submenu desktop-submenu--product">
    <ul>
     <?php if(get_page_by_title('About')) : ?>
     <li><a href="<?php echo get_permalink( get_page_by_title( 'About' ) ) ?>">Overview</a></li>
     <?php endif;?>
     <?php if ($currentblogname === 'dufaylite') : ?>
     <li><a href="<?php echo network_site_url(); ?>history-of-honeycomb/">History of Honeycomb</a></li>
     <li><a href="<?php echo network_site_url(); ?>our-people/">Our People</a></li>
     <li><a href="<?php echo network_site_url(); ?>testimonials/">Testimonials</a></li>
     <li><a href="<?php echo network_site_url(); ?>careers/">Careers</a></li>
     <?php elseif ($currentblogname === 'clayboard') : ?>
     <li><a href="<?php echo get_permalink( get_page_by_title( 'Company History' ) ) ?>">Company History</a></li>
     <li><a href="<?php echo get_permalink( get_page_by_title( 'Testimonials' ) ) ?>">Testimonials</a></li>
     <?php elseif ($currentblogname === 'envirolite') : ?>
     <li><a href="<?php echo get_permalink( get_page_by_title( 'Our Story' ) ) ?>">Our Story</a></li>
     <li><a href="<?php echo get_permalink( get_page_by_title( 'Testimonials' ) ) ?>">Testimonials</a></li>
     <?php elseif ($currentblogname === 'ultraboard') : ?>
     <!-- <li><a href="<?php echo get_permalink( get_page_by_title( 'Our People' ) ) ?>">Our People</a></li> -->
     <li><a href="<?php echo get_permalink( get_page_by_title( 'Testimonials' ) ) ?>">Testimonials</a></li>
    </ul>
    <?php else : ?>
    <?php endif; ?>
   </nav>
  </div>
 </div>
</section>

目的是在单击另一个项目并下拉子菜单时从上一个项目中删除 class，以避免发生这种双重问题，有人可以指教吗？

谢谢，

Answer 1

您需要在单击任何菜单项时从所有其他元素中删除 class .heightnav，然后将 class 应用于单击的菜单项。

jQuery( ".divisionslink" ).click(function() {
      jQuery( "section.navigation-desktop--submenu.heightnav" ).removeClass( "heightnav" );
      jQuery( ".divisions-submenu" ).toggleClass( "heightnav" );
});

这是假设每个下拉子菜单 <section> 都有 class .navigation-desktop--submenu

jQuery 双下拉导航问题

jQuery double dropdown Navigation Issue

html

css

navigation

wordpress

jquery