下拉菜单-slideToggle挑战

Question

以下是我的代码

$(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. 或者，当我单击主体子菜单的外部时，如果它可以向上滑动，那将会很棒。

我们非常感谢您的协助

谢谢

Answer 1

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