Question

我为wordpress多站点创建了一个jQuery下拉导航，导航效果很好但是一旦下拉发生一次，并且用户点击导航中的另一个下拉链接，现有下拉列表仍然显示为所以：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>

目的是在点击另一个项目并且子菜单下降时从上一个项目中删除该类，以避免出现这个双重问题，有人可以建议吗？

谢谢，

Answer 1

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

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

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

jQuery双下拉导航问题

1 个答案: