悬停时打开子菜单，不要保持打开状态

Question

我有这个菜单

                  <nav class="navMenu2">
                  <a data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" href="#">Serviços</a>
                  <a href="<?php echo $precos ?>">Preços</a>
                  <a href="<?php echo $clientes ?>">Clientes</a>
                  <a class="contacto" href="<?php echo $contactos ?>">Contactos</a>
                  <div class="escondido">
                  <a href="#">Sobre Nós</a>  
                  <a href="#">Recrutamento</a>  
                  </div>
                  <a class="pedir-demo" href="<?php echo $pedirdemo ?>">Pedir Demo</a>
                  <div class="dot"></div>
                  </nav>

我正在尝试在“escondido”上创建一个子菜单div，但它不会在悬停时保持打开状态。

我的 JS：

$('.contacto, .escondido').mouseenter(function(){
  if ( $(".escondido").is(':hidden') ) {
    $(".escondido").slideDown(200);
  } else {
    $(".escondido").slideUp(200);
  }
});

和fiddle：https://jsfiddle.net/r7Lm2dg3/

Answer 1

这里我给大家介绍一下。首先，我要质疑：你为什么使用 jquery 而不是纯粹的 CSS？因为你可以为你的下拉菜单实现悬停效果。

然后，如果你只是重新配置 DOM 结构如下鼠标只会离开下拉 <div> 只有当离开整个 .has-dropdown class.

$('.has-submenu').mouseenter(function(){
  if ( $(".escondido").is(':hidden') ) {
    $(".escondido").slideDown(200);
  } else {
    $(".escondido").slideUp(200);
  }
});

nav {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: initial;
  
  ul {
    list-style: none;
    
    li {
      list-style: none;
    }
  }
}

.contactos{
    font-size: x-large;
    
    a{
        text-decoration: none;
        color: black;
    }
}

.has-submenu {
  position: relative;
}

.escondido {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-top: 10px;
    transform: translateY(100%);
    z-index: 1;
    
    ul {
      background: red;
      padding: 15px;
      margin: 0;
      white-space: nowrap;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navMenu2">
  <li><a data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop" href="#">Serviços</a></li>
  <li><a href="<?php echo $precos ?>">Preços</a></li>
  <li><a href="<?php echo $clientes ?>">Clientes</a></li>
  <li class="has-submenu">
      <a class="contacto" href="<?php echo $contactos ?>">Contactos</a>
      <div class="escondido">
        <ul>
          <li><a href="#">Sobre Nós</a>  </li>
          <li><a href="#">Recrutamento</a>  </li>
        </ul>
      </div>
  </li>
  <li><a class="pedir-demo" href="<?php echo $pedirdemo ?>">Pedir Demo</a></li>
</nav>

Answer 2

这是我的解决方案。我已经更改了对象并添加了 mouseleave 事件。希望能满足您的需求。

$('.contacto').mouseenter(() =>{
  if ( $(".escondido").is(':hidden') ) {
    $(".escondido").slideDown(200);
  }
});
$('.escondido').mouseleave(() =>{
  if ( $(".escondido").is(':visible') ) {
    $(".escondido").slideUp(200);
  }
});

悬停时打开子菜单，不要保持打开状态

Submenu open on hover and don't stay opened

javascript

jquery

css

menu

hover