jQuery double dropdown導航問題

Question

我已經爲wordpress多站點創建了一個jQuery下拉導航，導航工作很好，但是一旦下拉發生一次，並且用戶單擊導航中的另一個下拉鍊接，現有的拖放下仍表現出像這樣：Double Drop Down Occurence

我想從被點擊導航另一個項目時出現兩次下取出下降，因此，只有一個是在一時間，像這樣：

Single dropdown

以下是形成導航的代碼：

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

 
jQuery(".divisionslink").click(function() { 
 
jQuery(".divisions-submenu").toggleClass("heightnav"); 
 
}); \t 
 
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> 
 
\t \t \t \t \t 
 
<!-- Dropdown Submenu --> 
 
<section class="about-submenu navigation-desktop--submenu heightnav"> 
 
\t <div class="row submenu"> 
 
\t \t <div class="small-12 columns"> 
 
\t \t \t <nav class="desktop-submenu desktop-submenu--product"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <?php if(get_page_by_title('About')) : ?> 
 
\t \t \t \t \t <li><a href="<?php echo get_permalink(get_page_by_title('About')) ?>">Overview</a></li> 
 
\t \t \t \t \t <?php endif;?> 
 
\t \t \t \t \t <?php if ($currentblogname === 'dufaylite') : ?> 
 
\t \t \t \t \t <li><a href="<?php echo network_site_url(); ?>history-of-honeycomb/">History of Honeycomb</a></li> 
 
\t \t \t \t \t <li><a href="<?php echo network_site_url(); ?>our-people/">Our People</a></li> 
 
\t \t \t \t \t <li><a href="<?php echo network_site_url(); ?>testimonials/">Testimonials</a></li> 
 
\t \t \t \t \t <li><a href="<?php echo network_site_url(); ?>careers/">Careers</a></li> 
 
\t \t \t \t \t <?php elseif ($currentblogname === 'clayboard') : ?> 
 
\t \t \t \t \t <li><a href="<?php echo get_permalink(get_page_by_title('Company History')) ?>">Company History</a></li> 
 
\t \t \t \t \t <li><a href="<?php echo get_permalink(get_page_by_title('Testimonials')) ?>">Testimonials</a></li> 
 
\t \t \t \t \t <?php elseif ($currentblogname === 'envirolite') : ?> 
 
\t \t \t \t \t <li><a href="<?php echo get_permalink(get_page_by_title('Our Story')) ?>">Our Story</a></li> 
 
\t \t \t \t \t <li><a href="<?php echo get_permalink(get_page_by_title('Testimonials')) ?>">Testimonials</a></li> 
 
\t \t \t \t \t <?php elseif ($currentblogname === 'ultraboard') : ?> 
 
\t \t \t \t \t <!-- <li><a href="<?php echo get_permalink(get_page_by_title('Our People')) ?>">Our People</a></li> --> 
 
\t \t \t \t \t <li><a href="<?php echo get_permalink(get_page_by_title('Testimonials')) ?>">Testimonials</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t <?php else : ?> 
 
\t \t \t \t <?php endif; ?> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </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