Question

我一直在抨击这个，似乎无法解决这个问题。最终，我正在尝试使用jquery和divs制作一个下拉导航栏，通过悬停显示。我差点把它弄下来，但事情就是当我有两个并且它们重叠时我无法让底部的一个淡出。

是否有任何关于如何执行此操作的建议。

<!-- Home Tab -->

<div id="m_bar_home">
  <script src="jquery-1.7.1.js"></script>
  <script>      var hide = false;
     $("#m_bar_home, #m_dddhome").hover(function(){
         if (hide) clearTimeout(hide);
         $("#m_dddhome").fadeIn("fast");
     }, function() {
         hide = setTimeout(function() {
             $("#m_dddhome, #m_ddd_lts").fadeOut("fast");
         }, 250);
     });
     </script> 

  <div id="m_dddhome" >Allo there</div>
  </div>

  <!-- Learn To Sail Tab -->

<div id="m_bar_lts">
  <script src="jquery-1.7.1.js"></script>
  <script>      var hide = false;
     $("#m_bar_lts, #m_ddd_lts").hover(function(){
         if (hide) clearTimeout(hide);
         $("#m_ddd_lts").fadeIn("fast");
     }, function() {
         hide = setTimeout(function() {
             $("#m_dddhome, #m_ddd_lts").fadeOut("fast");
         }, 250);
     });
     </script> 

  <div id="m_ddd_lts" >Allo there</div>

这是demo

我认为这与if功能有关，但我不确定。

有什么想法吗？

Answer 1

您的编码非常初级且非常低效。我不是冒犯，但是

您在同一页面上包含了两次jQuery。
两种情况下，函数调用都是100％冗余。您一次又一次地编写相同的代码。

您应该为每个div分配一个公共选择器。如果接下来你有100个div，你会包含100个jquery文件，并为每个元素反复使用相同的函数。

这就是你应该怎么做的。

$(".hover").hover(function(){               
    $(this).children(".inner").fadeIn("fast");      
}, function() {    
    $(this).children(".inner").fadeOut("fast");     
});

See demo

我对标记做了一些更改以添加一个公共类。

Answer 2

在您“显示”菜单之前，“隐藏”所有菜单。

Jquery .hover（）div重叠并且不会淡出

2 个答案:

See demo