Как добавить: hover и click event к элементу одновременно? - PullRequest
Новая
       9

Как добавить: hover и click event к элементу одновременно?

0 голосов
/ 31 августа 2018

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

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  if (children.style.display == 'block') {
    children.style.display = 'none';
  } else {
    children.style.display = 'block';
  }
});
nav > ul > li > ul {
  display: none;
}

nav > ul > li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}
  <body>
    <nav>
      <ul>
        <li><a href="#">Parent</a>
          <ul>
            <li><a href="#">child</a></li>
            <li><a href="#">child</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>

Спасибо.

Ответы [ 3 ]

0 голосов
/ 31 августа 2018

Переключать класс легче при нажатии на родительский элемент. 

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function() {
  children.classList.toggle("showIt");
});
nav>ul>li>ul {
  display: none;
}

nav>ul>li:hover ul {
  display: block;
}

li {
  width: max-content;
}

ul {
  padding: 0px;
}

.showIt {
  display: block;
}
<body>
  <nav>
    <ul>
      <li><a href="#">Parent</a>
        <ul>
          <li><a href="#">child</a></li>
          <li><a href="#">child</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
0 голосов
/ 31 августа 2018

Использовать базовую программную композицию 

$('#target').on('click mouseover', function () {
// Do something for both
});
0 голосов
/ 31 августа 2018

Этого легко избежать, установив children.style.display в пустую строку вместо назначения none, когда вы хотите скрыть дочерние элементы.

EDIT:

Требуется исправление: вместо неопределенного необходимо назначить пустую строку для children.style.display, чтобы отбросить переопределение (см. Текст, выделенный курсивом - мне пришлось это исправить).

Фрагмент кода должен выглядеть следующим образом: 

var parent = document.querySelector('nav > ul > li');
var children = document.querySelector('nav > ul > li > ul');

parent.addEventListener('click', function () {
  alert(children.style.display);
  if (children.style.display == 'block') {
    children.style.display = '';
  } else {
    children.style.display = 'block';
  }
}, true);
...