Выпадающее меню JQuery - PullRequest
Новая
       20

Выпадающее меню JQuery

0 голосов
/ 23 ноября 2018

Ниже приведен мой код.Я пытаюсь сделать простой выпадающий список при щелчке на li и на скользящем при повторном нажатии li.Но это не работает.Я не знаю, что не так.Кто-нибудь может прокомментировать это?Сверху я пытаюсь щелкнуть мышью по корпусу, чтобы снова сдвинуть меню.Но не при нажатии внутри фактического поля меню (зеленого цвета). 

$(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>

1 Ответ

0 голосов
/ 23 ноября 2018

Можете ли вы изменить это, щелкнув li в раскрывающемся списке и снова щелкнув li. 

$(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;
}

И нажмите Page1 или Page2, чтобы увидеть slideUp и slideDown

...