CODEWITHSUNDEEP
jquerydrop-down-menu
Patrick Sharer
Patrick Sharer

Reputation: 100

Jquery dropdown menu with slidetoggle function need help closing menu item when another is opened

I have a dropdown menu using the hide and slidetoggle functions. I am having trouble however setting it up so that when one menu item is opened the current menu item closes. I have a JSFiddle to show where I am. 

$('.menu-hide').hide();
$('.clickme').each(function() {
  $(this).show(0).on('click', function(e) {
    e.preventDefault();
    $(this).next('.menu-hide').slideToggle('fast');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fat_nav">
  <ul class="nav-l1">
    <li class="nav-l1-menuitem nav-l1-web_design">
      <a class="nav-top clickme" href="#">Web Design <span class="submenu-icon">&nbsp;</span></a>
      <ul class="nav_drop menu-hide">
        <li>
          <a href="self-storage-websites.php"><span>Self Storage Websites</span></a>
        </li>
        <li>
          <a href="responsive.php"><span>Responsive Design</span></a>
        </li>
        <!--<li>
                                    <a href="optimization.php"><img class="hero_image" src="assets/images/opti.png" /><span>Website Optimization</span></a>
                                </li>-->
        <li>
          <a href="software-integration.php"><span>Software Integration</span></a>
        </li>
      </ul>
    </li>
    <li class="nav-l1-menuitem nav-l1-marketing">
      <a class="nav-top clickme" href="#">Internet Marketing<span class="submenu-icon">&nbsp;</span></a>
      <ul class="nav_drop menu-hide">
        <li>
          <a href="seo.php"><span>Real SEO</span></a>
        </li>
        <li>
          <a href="paid-search.php"><span>PPC (Pay Per Click) Ads</span></a>
        </li>
        <li>
          <a href="social-media-marketing.php"><span>Social Media Marketing</span></a>
        </li>
        <!--<li>
                                    <a href="#"><img class="hero_image" src="assets/images/rep.png" /><span>Reputation Mgmt.</span></a>
                                </li>-->
      </ul>
    </li>
    <li class="nav-l1-menuitem nav-l1-about">
      <a class="nav-top clickme" href="#">About Us<span class="submenu-icon">&nbsp;</span></a>
      <ul class="nav_drop menu-hide">
        <li>
          <a href="about.php"><span>About M4S</span></a>
        </li>
        <li>
          <a href="careers.php"><span>Careers</span></a>
        </li>
        <li>
          <a href="contact.php"><span>Contact Us</span></a>
        </li>
      </ul>
    </li>
    <li class="nav_button">
      <a class="nav-top last-nav-link" href="request-a-quote.php">Free Quote</a>
    </li>
  </ul>
</div>
<!-- END OF FAT NAV -->

Any help would be appreciated.

Upvotes: 0

Views: 282

Answers (1)

KAD
KAD

Reputation: 11102

No need to loop through the a tags, just add an event listener to them and once an a tag is clicked then hide all the .menu_hide is a smooth way and then show its children.

You can use css to hide the .menu-hide initially better than waiting for the js to load.

$('.clickme').on('click', function(e) {
  e.preventDefault();
  
  if(!$(this).next('.menu-hide').is(':visible'))
  {
       $('.menu-hide').hide(500);
       $(this).next('.menu-hide').slideToggle('fast');
  }
 
});
.menu-hide
{
  display:none
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fat_nav">
  <ul class="nav-l1">
    <li class="nav-l1-menuitem nav-l1-web_design">
      <a class="nav-top clickme" href="#">Web Design <span class="submenu-icon">&nbsp;</span></a>
      <ul class="nav_drop menu-hide">
        <li>
          <a href="self-storage-websites.php"><span>Self Storage Websites</span></a>
        </li>
        <li>
          <a href="responsive.php"><span>Responsive Design</span></a>
        </li>
        <!--<li>
                                    <a href="optimization.php"><img class="hero_image" src="assets/images/opti.png" /><span>Website Optimization</span></a>
                                </li>-->
        <li>
          <a href="software-integration.php"><span>Software Integration</span></a>
        </li>
      </ul>
    </li>
    <li class="nav-l1-menuitem nav-l1-marketing">
      <a class="nav-top clickme" href="#">Internet Marketing<span class="submenu-icon">&nbsp;</span></a>
      <ul class="nav_drop menu-hide">
        <li>
          <a href="seo.php"><span>Real SEO</span></a>
        </li>
        <li>
          <a href="paid-search.php"><span>PPC (Pay Per Click) Ads</span></a>
        </li>
        <li>
          <a href="social-media-marketing.php"><span>Social Media Marketing</span></a>
        </li>
        <!--<li>
                                    <a href="#"><img class="hero_image" src="assets/images/rep.png" /><span>Reputation Mgmt.</span></a>
                                </li>-->
      </ul>
    </li>
    <li class="nav-l1-menuitem nav-l1-about">
      <a class="nav-top clickme" href="#">About Us<span class="submenu-icon">&nbsp;</span></a>
      <ul class="nav_drop menu-hide">
        <li>
          <a href="about.php"><span>About M4S</span></a>
        </li>
        <li>
          <a href="careers.php"><span>Careers</span></a>
        </li>
        <li>
          <a href="contact.php"><span>Contact Us</span></a>
        </li>
      </ul>
    </li>
    <li class="nav_button">
      <a class="nav-top last-nav-link" href="request-a-quote.php">Free Quote</a>
    </li>
  </ul>
</div>
<!-- END OF FAT NAV -->

Upvotes: 1

Related Questions