html - jQuery double dropdown Navigation Issue -

-

i have created jquery drop down navigation wordpress multisite, navigation working great once drop down has happened once, , user clicks on dropdown link in navigation, existing drop down still showing so: double drop down occurence

i'd remove drop down appearing twice when item in navigation clicked, 1 showing @ time so:

single dropdown

here code forming navigation: 

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

the aim remove class previous item when item clicked , submenu drops down, avoid double issue occuring, can please advise?

thanks,

you need remove class .heightnav other elements upon click of menu item, apply class clicked menu item.

jquery( ".divisionslink" ).click(function() {       jquery( "section.navigation-desktop--submenu.heightnav" ).removeclass( "heightnav" );       jquery( ".divisions-submenu" ).toggleclass( "heightnav" ); });

this assuming every dropdown submenu <section> has class .navigation-desktop--submenu


Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more