Jquery下拉菜单与另一个重叠

I have a table that displays product information. Jquery下拉菜单与另一个重叠

我有一个显示产品信息的表格。

Now when the user hovers over the "More" option against each row, it should show additional options - 5 of them to be precise.

现在，当用户将鼠标悬停在每行的“更多”选项上时，它应显示其他选项 - 其中5个是准确的。

I have a function that builds the "More" option dynamically

我有一个动态构建“更多”选项的函数

$(document).ready(function() {
   $(".nav li").each(function () {

   more_html= "<ul><li><a href='#'>Option 1</a></li><li><a href='#'>Option 2</a></li><li><a href='#'>Option 3</a></li><li><a href='#'>Option 3</a></li><li><a href='#'>Option 4 </a></li><li><a href='#'>Option 5</a></li></ul> "

  $(this).append(more_html)
  });
});

and another event that attaches the drop down functionality to the the "More". I am using JQuery drop down plug in.

以及将下拉功能附加到“更多”的另一个事件。我正在使用JQuery下拉插件。

jQuery('.nav li').live('hover', function() {

  $('.nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, 

  function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));

  });
});

Now over to the problem.

现在解决了这个问题。

When I hover over the More link on the first row, the menu drops down. But when i move mouse down through the menu, I hit on the "More" link on the second row, and that cause I losing the more drop down for the first row. Now it shows the More option drop down for the second row.

当我将鼠标悬停在第一行的“更多”链接上时，菜单会下降。但是当我在菜单中向下移动鼠标时，我点击了第二行的“更多”链接，这导致我丢失了第一行的更多下拉。现在它显示第二行的“更多”选项下拉列表。

I believe I need a way to disable the hover option on the More menu on second or later rows when a menu is already in place. But i am unable to do so!

我相信当菜单已经到位时，我需要一种方法来禁用第二行或更高行的“更多”菜单上的“悬停”选项。但我无法这样做！

Does giving a higher z-index for the drop down help? I been struggling with this for a while now. please help!

为下拉提供更高的z-index是否有帮助？我一直在努力解决这个问题。请帮忙！

1 个解决方案

#1

Quick guess would be your CSS. Your second function sets a hover for .nav li, which is appended with another inner li, which in turn supposedly also anwers to the .nav li script. could you maybe post the relevant CSS for some more info?

快速猜测将是你的CSS。你的第二个函数为.nav li设置了一个悬停，它附加了另一个内部li，而后者据说也是.nav li脚本的反转。你可以发布相关的CSS以获取更多信息吗？

秒客网

Jquery下拉菜单与另一个重叠

1 个解决方案

#1

#1

相关文章