在jQuery中，当鼠标悬停在子菜单上时，子菜单无法停留

92dk7w1h 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(160)

尝试让它，所以当我悬停在问题选项卡，一个子菜单下降，当你离开选项卡它消失。这部分工作，但是，当用户悬停在子菜单我希望它仍然存在。这是不工作的部分，它立即消失，即使设置超时功能设置为3秒。我不知道它为什么会这样。

let timeout;

$('nav > ul li:first-child').on('mouseenter click', function () {
        if ($('.issues').css('display') == 'none') {
            $('.issues').slideDown('slow'); 
        }
        else {
            $('.issues').slideUp();
        } 
        }).on('mouseleave', function () {
            timeout = setTimeout(function () {
                $('.issues').slideUp();
            }, 3000);
        });

    $('.issues').mouseenter(function() {
        clearTimeout(timeout);
    });

.issues {
    display: none;
    position: static;
    margin-top: 0;
    padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
                <li><a>Issues</a></li>
                <ul class="issues">
                    <li><a>X</a></li>
                    <li><a>Y</a></li>
                    <li><a>Z</a></li>
                </ul>
                <li><a>Press Releases</a></li>
                <li><a>Donate</a></li>
        </ul>
</nav>

jquery

来源：https://stackoverflow.com/questions/77265845/cant-get-sub-menu-to-stay-when-hovering-over-it-in-jquery

2条答案

按热度按时间

dpiehjr41#

UL应该在LI中才是有效的HTML。这样你就不需要子菜单来取消超时，因为鼠标还没有离开LI。

let timeout;

$('nav > ul li:has(ul)').on('mouseenter click', function() {
  window.clearTimeout(timeout);
  if ($('.issues').css('display') == 'none') {
    $('.issues').slideDown('slow');
  } else {
    $('.issues').slideUp();
  }
}).on('mouseleave', function() {
  timeout = setTimeout(function() {
    $('.issues').slideUp();
  }, 3000);
});

.issues {
  display: none;
  position: static;
  margin-top: 0;
  padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a>Issues</a>
      <ul class="issues">
        <li><a>X</a></li>
        <li><a>Y</a></li>
        <li><a>Z</a></li>
      </ul>
    </li>
    <li><a>Press Releases</a></li>
    <li><a>Donate</a></li>
  </ul>
</nav>

赞(0）回复(0）举报 2023-10-17

esbemjvw2#

为了简单起见，我会这样做：

$('nav > ul > li:first-child').on('mouseenter mouseleave click', function(ev) {
  const isHidden = $('.issues').css('display') == 'none';

  switch (ev.type) {
    case 'click':
      if (isHidden) {
        $('.issues').slideDown('slow');
      } else {
        $('.issues').slideUp();
      }
      break;

    case 'mouseleave':
      if (!isHidden) {
        $('.issues').slideUp();
      }
      break;

    case 'mouseenter':
      if (isHidden) {
        $('.issues').slideDown();
      }
      break;

    default:
      // Do nothing
      break;
  }
});

.issues {
  display: none;
  position: static;
  margin-top: 0;
  padding-left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li>
      <a>Issues</a>
      <ul class="issues">
        <li><a>X</a></li>
        <li><a>Y</a></li>
        <li><a>Z</a></li>
      </ul>
    </li>
    <li><a>Press Releases</a></li>
    <li><a>Donate</a></li>
  </ul>
</nav>

赞(0）回复(0）举报 2023-10-17

我来回答

在jQuery中，当鼠标悬停在子菜单上时，子菜单无法停留

2条答案

相关问题

热门标签

最新问答