Dropdown active status is the issue for parent div in jquery/javascript

Question

Here is my code

$(function(){

    $("li div.main-section").addClass("active");
    $('li > div > a').on('click',function(event){
        $('li > div').removeClass("active");
        $(this).closest('div').addClass("active");
    });

                    
      $('li > div > .dropdown-arrow').on('click',function(event){
          event.preventDefault()
          $(this).closest('li').find('ul').first().toggle(300);
          
      });
});

ul{
list-style:none;
}
.dropdown-main li  .dropdown-main {
    display: none;
}
.dropdown-main .active{
    background-color: rgba(0,201,255,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="dropdown-main" >
  <li class="dropdown" >
    <div class="main-section">
      <button class="dropdown-arrow">+</button>
      <a href="" ><span>Main Menu</span></a>
    </div>
    <ul class="dropdown-main">
      <li class="dropdown">
        <div>
          <button class="dropdown-arrow">+</button>
          <a href="" ><span>Sub Menu</span></a>
        </div>
        <ul class="dropdown-main">
          <li class="dropdown">
            <div >
              <button class="dropdown-arrow">+</button>
              <a href="" ><span>Child Menu</span></a>
            </div>
            <ul class="dropdown-main">
              <li class="dropdown">
                <div >
                  <button class="dropdown-arrow">+</button>
                  <a href="" ><span>Grand Child Menu</span></a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Description------------------

Case:1 By default active status for main menu color (blue).

Case:2 On clicking the '+' button the drop down need to be expand and collapse.

Case:3 On clicking the string (like main menu, sub menu, child menu..Garnd child menu) need to changes the active state.

Case:4 If child (Child Menu) string is active when the parent(Sub Menu) '+' button clicked clear the collapse(Child Menu) and remove the active class state and add to active class color to parent(Sub Menu) div.

Case:5 If child (Child Menu) string is not active when the parent(Sub Menu) '+' button clicked clear the collapse(Child Menu) and keep the active class state and parent(Main Menu) div.

Help welcome

Answer 1

To show the submenus you do not click on li > div > a but you click on li > div > button. Change that and your code should work.

Plus, some of your explanations ( cases ) are not really clear, so if this code doesn't solve your problem please let me know in the comments below.

Regarding the rest of your code ( jQ + html ) i'm a bit confused.

Why have the same classes on the sub-menu's ( at least add a specific class to each one ) ?

Why use span inside the a if you do not separate anything ? why not just leave the <a> tag ?

Do not use empty href but instead use a / href and preventDefault().

But also, why use a tag in the first place if you do not want to use it as an a tag ? :) use just span or something else.

$(function() {

  $("li div.main-section").addClass("active");
  $('li > div > a').on('click', function(event) {
    event.preventDefault()

    $('li > div').removeClass("active");
    $(this).closest('div').addClass("active");
  });


  $('li > div > .dropdown-arrow').on('click', function(event) {
    const subMenu = $(this).closest('li').find('ul').first()
   
    if ($(subMenu).is(':visible')) {
      $('li > div').removeClass("active")
      let newActive = $(this).closest('.dropdown-main').prev("div")
      $(newActive).addClass('active')
    }
 $(subMenu).toggle(300);
  });
});

ul{
list-style:none;
}
.dropdown-main li  .dropdown-main {
    display: none;
}
.dropdown-main .active{
    background-color: rgba(0,201,255,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="dropdown-main" >
  <li class="dropdown" >
    <div class="main-section">
      <button class="dropdown-arrow">+</button>
      <a href="" ><span>Main Menu</span></a>
    </div>
    <ul class="dropdown-main">
      <li class="dropdown">
        <div>
          <button class="dropdown-arrow">+</button>
          <a href="" ><span>Sub Menu</span></a>
        </div>
        <ul class="dropdown-main">
          <li class="dropdown">
            <div >
              <button class="dropdown-arrow">+</button>
              <a href="" ><span>Child Menu</span></a>
            </div>
            <ul class="dropdown-main">
              <li class="dropdown">
                <div >
                  <button class="dropdown-arrow">+</button>
                  <a href="" ><span>Grand Child Menu</span></a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 2

I've made some modifications to your code

$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').slideUp(200);
  } else {
    element.addClass('open');
    element.children('ul').slideDown(200);
    element.siblings('li').children('ul').slideUp(200);
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').slideUp(200);
  }
});

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  font-family: Raleway, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #00c9ff;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #ddd;
  background: #0d97bb;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #ddd;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<title>Test</title>
</head>

<body>

<div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        <ul>
           <li class="has-sub"><a href="#">Sub menu 1</a>
              <ul>
                 <li class="has-sub"><a href="#">Child menu 1</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                       <li><a href="#">Grand menu 3</a></li>
                       <li><a href="#">Grand menu 4</a></li>
                    </ul>
                 </li>
                 <li class="has-sub"><a href="#">Child menu 2</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                       <li><a href="#">Grand menu 3</a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li class="has-sub"><a href="#">Sub menu 2</a>
              <ul>
                 <li class="has-sub"><a href="#">Child menu 1</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                    </ul>
                 </li>
                 <li class="has-sub"><a href="#">Child menu 2</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                       <li><a href="#">Grand menu 3</a></li>
                    </ul>
                 </li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>

</body>

</html>