3-х уровневое всплывающее меню неправильно скрывается - PullRequest
Новая
       2

3-х уровневое всплывающее меню неправильно скрывается

0 голосов
/ 12 декабря 2018

Я работаю над новым 3-х уровневым меню.Первые 2, которые встроены, работают как положено, но третий, который является блочным элементом, не работает так, как я хочу. 

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

Нажмите на элемент (клиенты) на первом уровне, чтобы отобразить второй, затем наведите курсор на это меню, чтобы увидеть его в действии.В этом меню «Завершить» и «Платежи» есть выпадающее меню.После появления выпадающего меню и наведения мыши на второе меню вы можете видеть, что оно не закрывается, пока мышь не убрала 2 элемента, а выпадающее меню не закрывается при наведении мыши.Это близко, но я не могу понять это.

Любая помощь будет оценена.Я застрял на этом в течение нескольких дней.Я посмотрел на stackoverflow и получил несколько советов.Но все равно не работает так, как хотелось бы.

jsFiddle

1 Ответ

0 голосов
/ 12 декабря 2018

добавить событие отпускания мыши, чтобы закрыть всплывающее окно: 

   $('.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...