Jquery hover mouseout срабатывает слишком рано в раскрывающемся списке

Ниже я прикрепил фрагмент моей проблемы. Когда я наводю указатель мыши на слишком много пунктов меню, раскрывающийся список, который должен запускаться, будет .slideUp() слишком рано. Логика, по которой он должен работать, проста:

  1. При наведении курсора - оставьте связанный раскрывающийся список.

  2. Если mouseout - потеряйте связанный с ним выпадающий список.

  3. Если навести указатель мыши на раскрывающийся список, оставьте раскрывающийся список.

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

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

Обновлено: Мне нужно решение JavaScript, учитывая особенности CSS моей страницы, которые делают решение вложенного CSS нежелательным.

jQuery(".header2 li a").mouseover(function(event){

jQuery(".dropdown").css('display','none');

});
jQuery(".header2 li a").hover(function (event) {
    event.preventDefault();
	$id = jQuery(this).attr('id'); 
    jQuery("."+$id +".boxs").stop().slideDown(); //id of href is a class on .boxs/.dropdown for targetting
},function (event) {
$id = jQuery(this).attr('id');
    setTimeout(function () {
        if (  jQuery("."+$id+".boxs").hasClass('active')) {
        }
        else {
            event.preventDefault();
              jQuery("."+$id +".boxs").slideUp();
			  console.log($id);
        }
    }, 500);
});
 jQuery(".dropdown").mouseenter(function () {
    jQuery(this).addClass('active');
    jQuery(this).show();
});
 jQuery(".dropdown").mouseleave(function () {
    jQuery(this).slideUp();
    jQuery(this).removeClass('active');
});
.header2 li {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.header2 li a{
  padding:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxs header2">
  <li>
    <a href="/" class="active active1">Home</a>
  </li>

  <li>
    <a href="/category/news" class="" id="news">News</a>
  </li>
  <li>
    <a href="/category/featured" class="" id="f">Featured</a>
  </li>
  <li>
    <a href="/category/gear" class="" id="another">Another Dropdown</a>
  </li>
  <li>
    <a href="/category/the-journal" class="" id="one_more">One More! </a>
  </li>
</ul>
<!--DROPDOWNS BELOW-->

<div class="news boxs dropdown" style="display: none;">
                    <div class="container">
                        <div class="boxs">
                            <div class="row">
                                <div class="col-md-6 nopadding">
                                    <div class="col-xs-3">
                                        <ul>
                                            <li><h3>News From</h3></li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>Capitol Hill</li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>The White House</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
</div>

<div class="f boxs dropdown" style="display: none;">
                    <div class="container">
                        <div class="boxs">
                            <div class="row">
                                <div class="col-md-6 nopadding">
                                    <div class="col-xs-3">
                                        <ul>
                                            <li><h3>News From</h3></li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>Toronto</li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>Quebec</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
</div>

<div class="another boxs dropdown" style="display: none;">
                    <div class="container">
                        <div class="boxs">
                            <div class="row">
                                <div class="col-md-6 nopadding">
                                    <div class="col-xs-3">
                                        <ul>
                                            <li><h3>Zookeepers</h3></li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>Lions</li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>Tigers</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
</div>

<div class="one_more boxs dropdown" style="display: none;">
                    <div class="container">
                        <div class="boxs">
                            <div class="row">
                                <div class="col-md-6 nopadding">
                                    <div class="col-xs-3">
                                        <ul>
                                            <li><h3>Milk</h3></li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>1%</li>
                                        </ul>
                                    </div>
                                    <div class="col-xs-3">
                                        <ul>
                                            <li>2%</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
</div>
$id = jQuery(this).attr('id');jQuery("."+$id +".boxs").stop().slideDown(); эти две строки кажутся мне проблематичными, так как не все ваши ссылки в header2 li имеют свойства id, также вторая строка выше помещает . перед значением id, это должно быть #
Ryan Wilson 10.08.2018 15:30

Переместите раскрывающиеся div в связанные с ними li. Таким образом, когда вы наводите указатель мыши на li и раскрывающийся список, вы не «вытаскиваете» li, что упрощает обработку событий мыши.

Majid Akbari 10.08.2018 15:47

@RyanWilson это потому, что id тега привязки первого списка - это имя класса в раскрывающемся списке div. Таким образом, тег привязки имеет id='f', а dropdown имеет класс f. Это просто способ выбрать раскрывающийся список на основе идентификатора тега привязки, на который наведен курсор.

Summer Developer 13.08.2018 20:18
1
3
68
1

Ответы 1

Было бы гораздо разумнее использовать вложенную многоуровневую иерархию ul для этих опций, поскольку именно отдельные элементы div (и последующие промежутки между ними) вызывают проблему.

Если вы используете вложенные элементы ul, вы можете сделать это только с помощью CSS, например:

.header2 > li {
  float: left;
  list-style: none;
  padding: 0;
  margin: 0 5px;
  position: relative;
}

.header2 > li > ul {
  display: none;
  padding: 0;
  width: 200px;
}

.header2 > li:hover > ul {
  display: block;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="boxs header2">
  <li>
    <a href="/" class="active">Home</a>
  </li>
  <li>
    <a href="/category/news">News</a>
    <ul>
      <li>
        <h3>News From</h3>
      </li>
      <li>Capitol Hill</li>
      <li>The White House</li>
    </ul>
  </li>
  <li>
    <a href="/category/featured">Featured</a>
    <ul>
      <li>
        <h3>News From</h3>
      </li>
      <li>Toronto</li>
      <li>Quebec</li>
    </ul>
  </li>
  <li>
    <a href="/category/gear">Another Dropdown</a>
    <ul>
      <li>
        <h3>Zookeepers</h3>
      </li>
      <li>Lions</li>
      <li>Tigers</li>
    </ul>
  </li>
  <li>
    <a href="/category/the-journal">One More! </a>
    <ul>
      <li>
        <h3>Milk</h3>
      </li>
      <li>1%</li>
      <li>2%</li>
    </ul>
  </li>
</ul>

Использование одного только CSS делает логику более расширяемой (вы просто добавляете больше элементов li и ul для большего количества пунктов меню, не затрагивая JS), а также лучше работает.

Привет, извините, это был отличный ответ, но, к сожалению, мой CSS должен заставить его выглядеть правильно на странице с учетом моего дизайна, что означает, что я не могу использовать такие вложенные элементы, как этот, если бы вы могли отредактировать свой ответ, чтобы включить решение с учетом моего JavaScript / HTML, который был бы отличным, извините за беспокойство. Мой вопрос действительно в том, почему мой JavaScript не работает должным образом.

Summer Developer 13.08.2018 20:16

В этом случае я бы посоветовал изменить ваш CSS.

Rory McCrossan 13.08.2018 20:46

Другие вопросы по теме