jQuery 双下拉导航问题

Question

我为 wordpress 多站点创建了一个 jQuery 下拉导航，导航工作得很好但是一旦下拉发生一次，并且用户点击导航中的另一个下 zipper 接，现有的下拉仍然显示为所以:Double Drop Down Occurence

当单击导航中的另一个元素时，我想删除出现两次的下拉列表，以便一次只显示一个，如下所示:

Single dropdown

这是构成导航的代码:

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

目的是在单击另一个元素并且子菜单下拉时从上一个元素中删除类，以避免发生这种双重问题，任何人都可以请教吗？

谢谢，

Answer 1

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

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

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