Почему подменю исчезают в аккордеоне

Question

Я пытаюсь сделать парящий аккордеон.

Чего я хотел бы достичь:

Когда курсор мыши находится над меню, все подменю открываются, но остальные меню остаются свернутыми. (Просто, это аккордеон, но он запускается при наведении курсора вместо щелчка.)

Чего я достиг:

При наведении курсора на родительское меню открывается подменю.

Чего я не достиг:

Когда моя мышь покидает родительское меню, даже если оно все еще находится над подменю, подменю -меню рушится. (Просто моя мышь не может покинуть родительское меню. Я не могу щелкнуть ссылки подменю.)

HTML:

 <div class="accordion">
          <ul>
            <li class="parentmenu"><a href="#"><i class="fas fa-home"></i> Home</a></li>
            <ul class="dropdown">
              <li><a href="#">Home Submenu 1</a></li>
              <li><a href="#">Home Submenu 2</a></li>
            </ul>
            <li class="parentmenu"><a href="#"><i class="fas fa-address-card"></i> About</a></li>
            <ul class="dropdown">
              <li><a href="#">About Submenu 1</a></li>
              <li><a href="#">About Submenu 2</a></li>
            </ul>
            <li class="parentmenu"><a href="#"><i class="far fa-edit"></i> Services</a></li>
            <ul class="dropdown">
              <li><a href="#">Services Submenu 1</a></li>
              <li><a href="#">Services Submenu 2</a></li>
            </ul>
            <li class="parentmenu"><a href="#"><i class="fas fa-id-card-alt"></i> Contact</a></li>
            <ul class="dropdown">
              <li><a href="#">Contact Submenu 1</a></li>
              <li><a href="#">Contact Submenu 2</a></li>
            </ul>
          </ul>
        </div>

CSS:

.dropdown{
  display:none;
}

.deployed {
  display: block;
}

JQuery:

<script>
      jQuery(document).ready(function() {
        $('.parentmenu').hover(function() {
        if ($(this).next().css('display') == 'none'){
            $(this).next().addClass('deployed');
        }
          else {
          $(this).next().removeClass('deployed');
        }
        });
      });

Answer 1

Как только ваша мышь покидает li.parentmenu, эффект наведения, который вы применили с помощью jquery, больше не работает, так как ваша мышь больше не находится над этим элементом.

Семантически неверно иметь <ul> внутри <ul>. Вы должны обернуть вложенный <ul> в элемент <li>.

Больше информации об элементе ul и его допустимом содержании здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

Применение правильного semanti c приятно приводит нас к одному решению, которое вы может подать заявку.

Возможное решение

В вашем HTML вы можете обернуть вас ul.dropdown внутри li.parentmenu.

После этого вы больше не можете использовать селектор .next () для вашего оператора if и действия класса. Вместо этого вы можете использовать .find ('. Dropdown'), например.

Теперь, когда вы наводите курсор мыши на свой ul.dropdown, вы по-прежнему зависаете над li.parentmenu, и ваш выпадающий список остается видимым.

Здесь вы можете найти работающий пример JSFiddle: https://jsfiddle.net/7hwug3jz/

А вот ваш код HTML и jQuery с Изменения, которые я только что объяснил.

HTML

<div class="accordion">
  <ul>
    <li class="parentmenu">
      <a href="#"><i class="fas fa-home"></i> Home</a>
      <ul class="dropdown">
        <li><a href="#">Home Submenu 1</a></li>
        <li><a href="#">Home Submenu 2</a></li>
      </ul>
    </li>

    <li class="parentmenu">
      <a href="#"><i class="fas fa-address-card"></i> About</a>
      <ul class="dropdown">
        <li><a href="#">About Submenu 1</a></li>
        <li><a href="#">About Submenu 2</a></li>
      </ul>
    </li>

    <li class="parentmenu">
      <a href="#"><i class="far fa-edit"></i> Services</a>
      <ul class="dropdown">
        <li><a href="#">Services Submenu 1</a></li>
        <li><a href="#">Services Submenu 2</a></li>
      </ul>
    </li>

    <li class="parentmenu">
      <a href="#"><i class="fas fa-id-card-alt"></i> Contact</a>
      <ul class="dropdown">
        <li><a href="#">Contact Submenu 1</a></li>
        <li><a href="#">Contact Submenu 2</a></li>
      </ul>
    </li>

  </ul>
</div>

jQuery

jQuery(document).ready(function() {
  $('.parentmenu').hover(function() {
    if ($(this).find('.dropdown').css('display') == 'none'){
      $(this).find('.dropdown').addClass('deployed');
    }
    else {
      $(this).find('.dropdown').removeClass('deployed');
    }
  });
});

Answer 2

Вот более простой и понятный способ сделать это, если в CSS это не проблема.

a {
  text-decoration: none;
}

nav {
  font-family: monospace;
}

ul {
  background: darkorange;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li {
  color: #fff;
  background: gray;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition-duration: 0.5s;
}

li a {
  color: #fff;
}

li:hover {
  background: red;
  cursor: pointer;
}

ul li ul {
  background: orange;
  visibility: hidden;
  opacity: 0;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

ul li:hover>ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}

<nav role="navigation">
  <ul>
    <li><a href="#">Menu-1</a></li>
    <li><a href="#">Menu-2</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu-3</a></li>
  </ul>
</nav>