javascriptjqueryslidedownslideupmegamenu

Dropdown menu - slideToggle challenge

Following is my code

$(document).ready(function(){
  $('.submenu').hide();
  $('.menu').click(function(event){
    event.preventDefault();
    $(this).children('.submenu').slideToggle(1000);
    event.stopPropagation();
  });
});
li, body, a{
  list-style:none;
  padding:0;
  margin:0;
  color:white;
  text-decoration:none;
}

ul{
  display:flex;
  margin:0;
  margin:0;
  background:red;
}

.menu{
  background:black;
  color:white;
  border-right:2px solid white;
  height:5rem;
  width:5rem;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.submenu{
  height:300px;
  width:300px;
  background:purple;
  position:absolute;
  top:5rem;
  left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='menu'>
    <a href=''>Page 1</a>
    <div class='submenu'>
      <div class='page_title'></div>
      <div class='page_description'></div>
    </div>
  </li>
  
  <li class='menu'>
    <a href=''>Page 2</a>
    <div class='submenu'>
      <div class='page_title'></div>
      <div class='page_description'></div>
    </div>
  </li>
    
</ul>

I am trying to achieve two things in this.

  1. When I click on the second link, the first submenu should slide Up and second open should slide down.

  2. Here, when I click inside the first submenu after the slide down, it closes up. I want do not want it to close down, but only closes when I click on the same link tag or the next link

  3. Alternatively, it will be great, if it can slide up when I click outside of the submenu on the body.

Any assistance is highly appreciated

Thanks

Solution 

  • $(function() {
  (function initSlideToggle() {
    var $menus = $('.menu');

    $menus.find('.submenu')
      .on('click', function(e) {
        e.stopPropagation()
      })
      .hide()
      .end()
      .on('click', function(e) {
        var $this = $(e.currentTarget),
          $openedSubMenus = $menus.find('.submenu:visible').not($this),
          openThisSubMenu = function() {
            $this.children('.submenu').stop(true, true).slideToggle(1000);
          };

        e.preventDefault();
        e.stopPropagation();

        if (!$openedSubMenus.length) {
          openThisSubMenu();
        }
        $openedSubMenus.stop(true, true).slideToggle(1000, function() {
          openThisSubMenu();
        });

      });
  })();

});
    li,
body,
a {
  list-style: none;
  padding: 0;
  margin: 0;
  color: white;
  text-decoration: none;
}

ul {
  display: flex;
  margin: 0;
  margin: 0;
  background: red;
}

.menu {
  background: black;
  color: white;
  border-right: 2px solid white;
  height: 5rem;
  width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.submenu {
  height: 300px;
  width: 300px;
  background: purple;
  position: absolute;
  top: 5rem;
  left: 0;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class='menu'>
    <a href=''>Page 1</a>
    <div class='submenu'>
      <div class='page_title'></div>
      <div class='page_description'></div>
    </div>
  </li>

  <li class='menu'>
    <a href=''>Page 2</a>
    <div class='submenu'>
      <div class='page_title'></div>
      <div class='page_description'></div>
    </div>
  </li>

</ul>