jQuery проблем с мышью - PullRequest
Новая
       29

jQuery проблем с мышью

0 голосов
/ 16 июня 2020

Новое в JQuery. Я пытаюсь создать меню, в котором ссылки отображаются в div, который находится в той же позиции, когда одна из категорий в меню наведена. Я хочу, чтобы меню оставалось открытым и исчезало, когда мышь покидает меню. Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда наведен курсор на «проекты», ни одна из других категорий меню не открывается. Я думаю, это как-то связано с "mouseleave", но я не могу понять, как это исправить.

HTML: 

<nav>
        <ul>
            <li class="menuItem">
                <a id="press" href="#">Press</a>
            </li>
            <li class="menuItem">
                <a id="projects" href="#">Projects</a>
            </li>
            <li class="menuItem">
                <a id="contact" href="#">Contact</a>
            </li>
        </ul>
        <div class="wing" id="pressWing">
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
            </ul>
        </div>
        <div class="wing" id="contactWing">
            <ul>
                <li><a href="">Contact 1</a></li>
                <li><a href="">Contact 2</a></li>
            </ul>
        </div>
        <div class="wing" id="projectsWing">
            <ul>
                <li><a href="">Project 1</a></li>
                <li><a href="">Project 2</a></li>
            </ul>
        </div>
    </nav>

jQuery: 

$(function() {
    $('#contact').hover(function() {
        $('#contactWing').show();
    });
    $('#contactWing').mouseleave(function() {
        $('#contactWing').hide();
    })
    $('#projects').hover(function() {
        $('#projectsWing').show();
    });
    $('#projectsWing').mouseleave(function() {
        $('#projectsWing').hide();
    })
    $('#press').hover(function() {
        $('#pressWing').show();
    });
    $('#pressWing').mouseleave(function() {
        $('#pressWing').hide();
    })
});

Вот скрипка: https://codepen.io/maris170/pen/pogEXap

1 Ответ

0 голосов
/ 16 июня 2020

Я не уверен на 100%, что именно вы ищете, но основная идея c с CSS использует наведение и вложение для отображения и скрытия дочерних элементов UL 

nav ul,
nav li {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

/* FIRST LEVEL */

nav > ul > li {
  float: left;
}

nav > ul > li > a {
  padding: 0 2em;
}

nav > ul > li:hover > a {
  background-color: #CCCCCC;
}

/* DROP DOWN */

nav > ul > li > ul {
  display: none;
  position: absolute;
  left:0; /* remove this if you want it under the hovered option */
  width: 20em;
  background-color: #EDD;
}

nav > ul > li:hover ul {
  display: block;
  min-height: 20em;
}

nav > ul > li > ul a {
  display: block;
  padding: .2em;
}

nav > ul > li > ul a:hover {
  background-color: #EAA;
}
<nav>
  <ul>
    <li class="menuItem">
      <a id="press" href="#">Press</a>
      <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
      </ul>

    </li>
    <li class="menuItem">
      <a id="projects" href="#">Projects</a>
      <ul>
        <li><a href="">Project 1</a></li>
        <li><a href="">Project 2</a></li>
      </ul>
    </li>
    <li class="menuItem">
      <a id="contact" href="#">Contact</a>
      <ul>
        <li><a href="">Contact 1</a></li>
        <li><a href="">Contact 2</a></li>
      </ul>
    </li>
  </ul>

</nav>
...