时间戳

首页 > 解决方案 > 下拉菜单 - slideToggle 挑战

javascript - 下拉菜单 - slideToggle 挑战

问题描述

以下是我的代码

$(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. 或者，如果我在正文的子菜单之外单击时它可以向上滑动，那就太好了。

非常感谢任何帮助

谢谢

标签： javascriptjqueryslidedownslideupmegamenu

解决方案

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

推荐阅读