PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, November 8, 2022

[FIXED] How can I close one menu when another is opened with Click?

 November 08, 2022     dropdown, javascript, menu     No comments   

Issue

After I've tried most other relevant search results for my problem without anything working I'll try and post my own question instead.

This works like a charm and does so by opening hidden submenus in a websites main menu. Problem is that if I open one of the total of four submenus and then open another the submenus just pile above each other. I'd like only one menu item's submenu to be open at once, meaning that if I open a submenu the previously opened one should close.

jQuery(document).ready(function($) {
  $(".clickSlide > ul").hide();
  $(".clickSlide").click(function() {
    $(this).children("ul").stop(true, true).slideToggle("fast"),
      $(this).toggleClass("dropdown-active");
  });
});
<ul id="menu-sidhuvud-e-butik-vanster" class="menu">
  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Any suggestions? I'm pretty novice with JS.

Thanks for any guidance.


Solution

You already have a formula how to do this in your code. All you need ensure is that you toggle .hide() function on every other element that wasn't clicked.

$(this).siblings().children("ul").hide("fast")

The line above does exactly that. It selects all the siblings and hides their children that are ul tags.

jQuery(document).ready(function ($) {
  $(".clickSlide > ul").hide();
  $(".clickSlide").click(function () {
    $(this).siblings().children("ul").hide("fast")
    $(this).children("ul").stop(true, true).slideToggle("fast"),  
    $(this).toggleClass("dropdown-active");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-sidhuvud-e-butik-vanster" class="menu">

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 1</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent 3</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>

  <li class="clickSlide menu-item menu-item-has-children"><a>Parent</a>
    <ul class="sub-menu" style="display: none;">
      <li class="menu-item-has-children menu-item-1947"><a href="#">Sub parent</a>
        <ul class="sub-menu">
          <li class="menu-item-1948"><a href="#">Link object</a></li>
          <li class="menu-item-2224"><a href="#">Link object</a></li>
        </ul>
      </li>
    </ul>
  </li>



Answered By - Esszed
Answer Checked By - Willingham (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing