3层菜单弹出窗口无法正确隐藏

Question

我一直在研究新的3层菜单。前两个是内联函数，按预期工作，但第三个是块元素，不能按我的意愿运行。

        <CustomTextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         app:custom_font="bold"/>

$(document).ready(function() {
  $('.menu-item').bind('click', function() {
    if ($(this).children('ul').length = 0) {
      return false;
    } else {
      $('.parent-menu > li').each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).children('.child-menu').slideToggle();
        }
      });

      $(this).addClass('active');
      $(this).children('.child-menu').slideToggle();
      return false;
    }
  });
  $('.menu-item2').hover(function() {
    if ($(this).children('ul').length = 0) {
      return false;
    } else {
      $('.child-menu > li').each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
        } else {
          $(this).children('ul').hide();
        }
      });
      if ($(this).children('ul').length > 0) {
        $(this).addClass('active');
        $(this).children('ul').show();
      }
      return false;
    }
  });
});

@charset "utf-8";

/* ---------------------------------------------------------------
   HTML5/CSS3 Helix Designs
   ---------------------------------------------------------------
   Version: 1.0
   Author: David Booth
   Author URI: http://www.helixdesigns.co.uk
   License: MIT License
   License URI: http://www.opensource.org/licenses/mit-license.php
   --------------------------------------------------------------- 
*/

:root {
  --background: #A3BDE5;
  --highlight: #C2D3EE;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.parent-menu {
  font-family: Cambria;
  font-size: 1em;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #A3BDE5;
}

ul.parent-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: auto;
  background: #A3BDE5;
}

ul.parent-menu li {
  display: inline-block;
  width: 113px;
  text-align: center;
  color: #4183C4;
  padding: 5px 8px;
  position: relative;
}

ul.parent-menu li {
  display: inline-block;
}

ul.parent-menu li.active {
  color: #fff;
  background: #C2D3EE;
  padding: 5px 7px
}

ul.parent-menu li.active:before,
ul.child-menu li.active:before {
  content: "";
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

ul.parent-menu li.active:after,
ul.child-menu li.active:after {
  content: "";
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

ul.parent-menu li a {
  padding: 4px 2px 5px 2px;
  text-decoration: none;
}

ul.parent-menu li a:hover,
ul.parent-menu li:hover {
  color: #fff;
  text-decoration: none;
  background: #C2D3EE;
}

ul.parent-menu li ul.child-menu {
  width: auto;
  position: absolute;
  top: 32px;
  color: #000;
  background-color: whitesmoke;
  border-bottom: 1px solid #E1E8ED;
  display: none;
}

ul.menu1 {
  left: -175px;
  right: -85px;
}

ul.menu2 {
  left: -310px;
  right: -300px;
}

ul.menu3 {
  left: 0px;
  right: -65px;
  padding: 0;
  margin: 0;
}

ul.parent-menu li ul.child-menu li {
  width: auto;
  padding: 5px 6px;
  background-color: whitesmoke;
  position: relative;
}

ul.parent-menu li ul.child-menu li a {
  background-color: whitesmoke;
  color: #000;
  padding: 5px 6px;
}

ul.parent-menu li ul.child-menu li a:hover {
  background: lightgray;
  color: #FFF;
  padding: 5px 6px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

ul.parent-menu li ul.child-menu li:hover {
  background: none;
}

ul.parent-menu a:link,
ul.parent-menu a:visited {
  color: #4183C4;
  text-decoration: none;
}

ul.parent-menu a:active {
  color: #FFF;
  text-decoration: none;
}

ul.grandchild-menu {
  position: absolute;
  left: 0;
  top: 30px;
  width: 100px;
  border: solid thin #000;
  background: whitesmoke;
  margin: 0;
  padding: 5px 3px;
  display: none;
}

ul.parent-menu li ul.child-menu li ul.grandchild-menu li {
  width: 100%;
  background: whitesmoke;
  padding: 3px 1px;
}

ul.child-menu li.active:before {
  border-bottom: 6px solid #000;
}

ul.child-menu li.active:after {
  border-bottom: 6px solid #000;
}

ul.grandchild-menu li {
  padding: 0;
  margin: 3px 1px;
}

ul.parent-menu li ul.child-menu li ul.grandchild-menu li a {
  text-align: left;
  padding: 0 20px;
  color: #000;
}

ul.parent-menu li ul.child-menu li ul.grandchild-menu li a:hover {
  background: lightgray;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.menu-item a {
  cursor: pointer;
}

在第一级上单击一个项目（“客户端”）以显示第二级，然后将鼠标悬停在此菜单上以查看其运行情况。在此菜单上，完成和付款有一个下拉菜单。出现下拉菜单后，将鼠标移到第二个菜单上，您会看到它直到鼠标移开2个项目后才会关闭，并且在鼠标移出时下拉菜单也不会关闭。它很近，但是我不太清楚。

任何帮助将不胜感激。我已经坚持了好几天。我查看了stackoverflow并得到了一些提示。但是仍然无法如我所愿。

jsFiddle

Answer 1

添加事件鼠标离开以关闭弹出窗口：

   $('.menu-item2').on('mouseleave',function(){
       $('.child-menu > li').children('ul').hide();
   });

$(document).ready(function() {
  $('.menu-item').bind('click', function() {
    if ($(this).children('ul').length = 0) {
      return false;
    } else {
      $('.parent-menu > li').each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).children('.child-menu').slideToggle();
        }
      });

      $(this).addClass('active');
      $(this).children('.child-menu').slideToggle();
      return false;
    }
  });
  $('.menu-item2').hover(function() {
    if ($(this).children('ul').length = 0) {
      return false;
    } else {
      $('.child-menu > li').each(function() {
        if ($(this).hasClass('active')) {
          $(this).removeClass('active');
          $(this).children('ul').hide();
        } else {
          $(this).children('ul').hide();
        }
      });
      if ($(this).children('ul').length > 0) {
        $(this).addClass('active');
        $(this).children('ul').show();
      }
      return false;
    }
  });
  
  $('.menu-item2').on('mouseleave',function(){
      $('.child-menu > li').children('ul').hide();
  });
});

@charset "utf-8";

/* ---------------------------------------------------------------
   HTML5/CSS3 Helix Designs
   ---------------------------------------------------------------
   Version: 1.0
   Author: David Booth
   Author URI: http://www.helixdesigns.co.uk
   License: MIT License
   License URI: http://www.opensource.org/licenses/mit-license.php
   --------------------------------------------------------------- 
*/

:root {
  --background: #A3BDE5;
  --highlight: #C2D3EE;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.parent-menu {
  font-family: Cambria;
  font-size: 1em;
  margin: 0;
  padding: 0;
  width: 100%;
  background: #A3BDE5;
}

ul.parent-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: auto;
  background: #A3BDE5;
}

ul.parent-menu li {
  display: inline-block;
  width: 113px;
  text-align: center;
  color: #4183C4;
  padding: 5px 8px;
  position: relative;
}

ul.parent-menu li {
  display: inline-block;
}

ul.parent-menu li.active {
  color: #fff;
  background: #C2D3EE;
  padding: 5px 7px
}

ul.parent-menu li.active:before,
ul.child-menu li.active:before {
  content: "";
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

ul.parent-menu li.active:after,
ul.child-menu li.active:after {
  content: "";
  height: 0;
  width: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  position: absolute;
  bottom: -1px;
  left: 50%;
  margin: 0 0 0 -3px;
  z-index: 100;
}

ul.parent-menu li a {
  padding: 4px 2px 5px 2px;
  text-decoration: none;
}

ul.parent-menu li a:hover,
ul.parent-menu li:hover {
  color: #fff;
  text-decoration: none;
  background: #C2D3EE;
}

ul.parent-menu li ul.child-menu {
  width: auto;
  position: absolute;
  top: 32px;
  color: #000;
  background-color: whitesmoke;
  border-bottom: 1px solid #E1E8ED;
  display: none;
}

ul.menu1 {
  left: -175px;
  right: -85px;
}

ul.menu2 {
  left: -310px;
  right: -300px;
}

ul.menu3 {
  left: 0px;
  right: -65px;
  padding: 0;
  margin: 0;
}

ul.parent-menu li ul.child-menu li {
  width: auto;
  padding: 5px 6px;
  background-color: whitesmoke;
  position: relative;
}

ul.parent-menu li ul.child-menu li a {
  background-color: whitesmoke;
  color: #000;
  padding: 5px 6px;
}

ul.parent-menu li ul.child-menu li a:hover {
  background: lightgray;
  color: #FFF;
  padding: 5px 6px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

ul.parent-menu li ul.child-menu li:hover {
  background: none;
}

ul.parent-menu a:link,
ul.parent-menu a:visited {
  color: #4183C4;
  text-decoration: none;
}

ul.parent-menu a:active {
  color: #FFF;
  text-decoration: none;
}

ul.grandchild-menu {
  position: absolute;
  left: 0;
  top: 30px;
  width: 100px;
  border: solid thin #000;
  background: whitesmoke;
  margin: 0;
  padding: 5px 3px;
  display: none;
}

ul.parent-menu li ul.child-menu li ul.grandchild-menu li {
  width: 100%;
  background: whitesmoke;
  padding: 3px 1px;
}

ul.child-menu li.active:before {
  border-bottom: 6px solid #000;
}

ul.child-menu li.active:after {
  border-bottom: 6px solid #000;
}

ul.grandchild-menu li {
  padding: 0;
  margin: 3px 1px;
}

ul.parent-menu li ul.child-menu li ul.grandchild-menu li a {
  text-align: left;
  padding: 0 20px;
  color: #000;
}

ul.parent-menu li ul.child-menu li ul.grandchild-menu li a:hover {
  background: lightgray;
  border: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.menu-item a {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <ul class="parent-menu">
    <li id="home">
      <a>Home</a>
    </li>
    <li id="administrators" class="menu-item">
      <a>Administrators</a>
      <ul class="child-menu menu1">
        <li>
          <a href="add-administrator.php">Add</a>
        </li>
        <li>
          <a href="delete-administrator.php">Delete</a>
        </li>
        <li>
          <a href="diary.php">Diary</a>
        </li>
        <li>
          <a href="list-administrators.php">List</a>
        </li>
        <li>
          <a href="passwords.php?type=administrator">Passwords</a>
        </li>
      </ul>
    </li>
    <li id="clients" class="menu-item">
      <a>Clients</a>
      <ul class="child-menu menu2">
        <li class="menu-item2">
          <a href="add-client.php">Add</a>
        </li>
        <li class="menu-item2">
          <a href="call-log.php">Call Log</a>
        </li>
        <li class="menu-item2">
          <a href="delete-client.php">Delete</a>
        </li>
        <li id="finalize" class="menu-item2">
          <a href="">Finalize</a>
          <ul class="grandchild-menu">
            <li>
              <a href="setup-domain.php">Domain</a>
            </li>
            <li>
              <a href="setup-host.php">Host</a>
            </li>
          </ul>
        </li>
        <li class="menu-item2">
          <a href="list-clients.php">List</a>
        </li>
        <li class="menu-item2">
          <a href="message-client.php">Message</a>
        </li>
        <li class="menu-item2">
          <a href="passwords.php?type=client">Passwords</a>
        </li>
        <li id="payments" class="menu-item2">
          <a href="">Payments</a>
          <ul class="grandchild-menu">
            <li>
              <a href="client-payments.php?type=balance">Balance</a>
            </li>
            <li>
              <a href="client-payments.php?type=deposit">Deposit</a>
            </li>
          </ul>
        </li>
        <li class="menu-item2">
          <a href="setup-client.php">Setup</a>
        </li>
      </ul>
    </li>
    <li id="products" class="menu-item">
      <a>Products</a>
      <ul class="child-menu menu3">
        <li>
          <a href="add-product.php">Add</a>
        </li>
        <li>
          <a href="delete-product.php">Delete</a>
        </li>
        <li>
          <a href="list-product.php">List</a>
        </li>
      </ul>
    </li>
  </ul>
</body>