Question

我正在使用菜单。如果用户将光标移动到菜单的主要元素上，它会显示一个子菜单（它有一个隐藏的延迟），但如果我将光标移动到另一个主要元素上，则前一个元素仍显示在新元素后面（并且只是隐藏通过延迟）。

当我将光标移到另一个主元素上时，如何隐藏前一个元素？

以下是菜单：

$('li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="main-menu" class="nav navbar-nav ref">
  <li class="dropdown dropdown-large option">
    <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
    <ul class="dropdown-menu dropdown-menu-large row change-f">
      <li class="col-sm-4 option-sm">
        <ul>
          <li> </li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li> </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="dropdown dropdown-large option">
    <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
    <ul class="dropdown-menu dropdown-menu-large row change-f">
      <li class="col-sm-4 option-sm">
        <ul>
          <li> </li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 1

我将您的第二个菜单ID更改为＃drop-two。

$(document).ready(function(){
  $('.dropdown-menu, .dropdown-menu2').hide();
   
  $('#drop-to').mouseover(function() {
  $('.dropdown-menu').fadeIn();
  })
  
  $('#drop-to').mouseout(function() {
  $('.dropdown-menu').fadeOut(1000);
  })
  
  $('#drop-two').mouseover(function() {
  $('.dropdown-menu2').fadeIn();
  })
 
    $('#drop-two').mouseout(function() {
  $('.dropdown-menu2').fadeOut(1000);
  })
  

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="main-menu" class="nav navbar-nav ref">
  <li class="dropdown dropdown-large option">
    <a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
    <ul class="dropdown-menu dropdown-menu-large row change-f">
      <li class="col-sm-4 option-sm">
        <ul>
          <li> </li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li> </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="dropdown dropdown-large option">
    <a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
    <ul class="dropdown-menu2 dropdown-menu-large row change-f">
      <li class="col-sm-4 option-sm">
        <ul>
          <li> </li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
          <li class="dropdown-header title"><a href="#">subelement</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

在jQuery中悬停淡入和淡出元素

1 个答案: