Раскрывающееся меню - вызов слайд-тугл - PullRequest
Новая
       59

Раскрывающееся меню - вызов слайд-тугл

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

Ниже мой код 

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

Я пытаюсь достичь двух вещей в этом.

  1. Когда я нажимаю на вторую ссылкупервое подменю должно сдвинуться вверх, а второе открытое должно сдвинуться вниз.

  2. Здесь, когда я щелкаю внутри первого подменю после скольжения вниз, оно закрывается.Я хочу, чтобы он не закрывался, а закрывается только тогда, когда я нажимаю на тот же тег ссылки или на следующую ссылку

  3. В качестве альтернативы будет здорово, если он может скользить вверх, когдаЯ нажимаю за пределами подменю на теле.

Любая помощь высоко ценится

Спасибо

1 Ответ

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

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