下拉菜单 - 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>

我试图在这方面实现两件事。

当我点击第二个 link 时，第一个子菜单应该向上滑动，第二个打开应该向下滑动。
这里，当我在第一个子菜单内点击滑下后，它关闭了。我不想让它关闭，但只有在我点击相同的 link 标签或下一个 link
或者，如果我在body的子菜单外点击时能向上滑动就好了。

非常感谢任何帮助

谢谢

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>

下拉菜单 - slideToggle 挑战

Dropdown menu - slideToggle challenge

javascript

jquery

slidedown

slideup

megamenu