0

如果项目列表项悬停在上面，我有一个项目列表，我想在其中显示相关面板。我已经让它工作了，但问题是一旦我将鼠标悬停在链接列表项上，我就无法将鼠标悬停在面板内的内容上，原因很明显，因为我使用了一个mouseleave函数。

我已经在这几天了，无法弄清楚需要做什么才能使相关面板保持打开状态，因此我可以将鼠标悬停在它上面并单击其中的阅读更多链接。

我尝试在面板上添加一个悬停状态的类，但这似乎也不起作用。

我的 HTML 是：

<div id="item-wrapper">
    <ul>
        <li><a href="#" id="item-1">Item 1</a>
        </li>
        <li><a href="#" id="item-2">Item 2</a>
        </li>
    </ul>
</div>

<div id="panel-1" class="panel">
     <h2>This is panel 1!</h2>
    <a href="#">read more 1...</a>
</div>

<div id="panel-2" class="panel">
     <h2>This is panel 2!</h2>
    <a href="#">read more 2...</a>
</div>

我的基本 jQuery 是：

$('#item-1').mouseenter(function () {
    $('#panel-1.panel').toggle();
});

$('#item-1').mouseleave(function () {
    $('#panel-1.panel').toggle();
});

$('#item-2').mouseenter(function () {
    $('#panel-2.panel').toggle();
});

$('#item-2').mouseleave(function () {
    $('#panel-2.panel').toggle();
});

...然后我有一些 CSS 设置面板display: none开始。请注意，如果两个列表项链接都没有悬停，那么如果在此之前已打开面板，则面板应该消失。

小提琴演示在这里...

4

2 回答 2

1

几件事：

  1. 在 上使用悬停事件处理程序li，而不是a.
  2. 这允许您将您的内容移动到lis 中，因此悬停在内容上意味着您仍然悬停在其父级li.

jQuery :

$('#item-1').parent().hover(function () {
    $('#panel-1.panel').toggle();
});

$('#item-2').parent().hover(function () {
    $('#panel-2.panel').toggle();
});

分叉的 jsFiddle

于 2013-08-27T20:46:38.890 回答
1

在我看来，解决这个问题的唯一真正方法是将隐藏元素包装在您悬停的元素中，以便可以将 mouseleave 事件绑定到包装器。

链接更新： 这是一个小提琴

我还使用元素上的数据属性来跟踪要打开哪个面板。这样，您只需要以下代码：

$('#item-wrapper a').mouseenter(function (e) {
    if ($(this).data('panel')) {
        $('.panel').hide();
        $('#' + $(this).data('panel')).show();
    }
});
$('#item-wrapper').mouseleave(function () {
    $('.panel').hide();
});

编辑：添加了一个条件以确保面板中的锚标签不会触发悬停事件。

于 2013-08-27T20:48:38.503 回答