Menu drop down JQuery

Question

Following is my code. I am trying for a simple drop down when clicking on to li and slideup when clicking li back again. But it's not working. I don't know whats wrong. Can anyone comment on this? On top, I am trying to click on the body to get the menu slide back up again. But not when clicking inside the actual menu box (in green).

$(document).ready(function(){
  
  let list = $('ul li');
  let mega = $('.megamenu');
  
  list.click(function(e){
    e.preventDefault();
    mega.slideDown(400);
    
    if((e.target) == list){
      mega.slideUp(400);
    }
  })
});

li{
  list-style:none;
  display:inline-block;
  padding-right: 5rem;
}

.megamenu{
  background:green;
  padding:5rem;
  color:white;
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>Page 1
      <div class ='megamenu'><h1>Mega menu</h1></div>
    </li>
    <li>Page 2
      <div class ='megamenu'><h1>Mega menu</h1></div>
    </li>
  </ul>
</div>

Possible duplicate of [Click outside menu to close in jquery](https://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery) — Funk Doc, Nov 23 '18 at 17:02

Duong Pham · Answer 1 · 2018-11-23T17:20:59.360

Could you change like this for click to li to dropdown and click li slideup again

$(document).ready(function(){
  let list = $('.menu');
  let mega = $('.submenu');
  list.click(function(e){
    e.preventDefault();
    var menuDisplay = mega.css('display');
    if(menuDisplay == 'block') {
      mega.slideUp(400);
    } else {
      mega.slideDown(400);
    }
  })
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class='menu'>Page 1
      <div class ='submenu'><h1>Mega menu</h1></div>
    </li>
    <li class='menu'>Page 2
      <div class ='submenu'><h1>Mega menu</h1></div>
    </li>
  </ul>
</div>

CSS

.menu{
  list-style:none;
  display:inline-block;
  padding-right: 5rem;
}

.submenu{
  background:green;
  padding:5rem;
  color:white;
  display:none;
}

And click Page1 or Page2 to see slideUp and slideDown

Menu drop down JQuery

1 Answers1