【发布时间】：2016-01-13 14:36:03
【问题描述】：
我已经为 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>目的是在单击另一个项目并且子菜单下拉时从上一个项目中删除该类，以避免发生这种双重问题，有人可以建议吗？
谢谢，
【问题讨论】：
标签： jquery html css wordpress navigation