Question

我在jQuery中使用了两个不同的函数。一个是在li悬停时的slideUp和slideDown of ul。第二个是显示块ul，其中li是根据所有li中的一些文本搜索选择的。但问题是这两个功能相互冲突。两者都很好。但第一个覆盖。 here is example

我第一次向上滑动并在li悬停时向下滑动侧边栏菜单：

$( ".sidebarnav ul.sf-menu" ).find('li').hover(function() {
    $(this).find('> ul').slideDown();
}, function() {
    $(this).find('> ul').slideUp();
});

这很好用。做它应该做的事。

我的下一个自动选择代码并显示选择了li的ul：

var ptitle = $("p.productpage_title").text();

$('.sidebarnav .sf-menu ul li a').filter(function(){ 
    return $(this).text() == ptitle; 
}).closest('ul').css({"display":"block"});
$('.sidebarnav .sf-menu ul li  a').filter(function(){ 
    return $(this).text() == ptitle;
}).closest('ul').parent().closest('ul').css({"display":"block"});

首次加载页面时打开ul。但是当我们将鼠标悬停在侧栏上的ul上时，第一个函数工作，然后第二个函数不会打开ul。

我认为这可以通过在悬停时将所选择的li排除为slideUp来完成。

我使用了.not（）函数，但没有为我工作。

任何人都可以帮助我，如何在悬停时通过第二个函数形式排除选定的li。

任何帮助将不胜感激。

注意：我想使用显示块而不是显示和隐藏功能。由于一些CSS问题。

Answer 1

除非您将鼠标移动到元素的边界，否则不会触发悬停。尝试在“第二个函数”中明确调用slideDown，以便按预期显示“选定”菜单项。

$('.sidebarnav .sf-menu ul li a').filter(function(){ 
    return $(this).text() == ptitle; 
}).closest('ul').css({"display":"block"}).slideDown();

你的一般机制虽然有点笨拙。考虑进行这些调整以使其更清晰。

将data-title属性添加到列表项。这样，您可以直接选择元素，而无需使用filter函数。
就此而言，请考虑为每个菜单项添加data-title属性
您的长选择器（例如.sidebarnav .sf-menu ul li a）和使用closest对我来说都是红旗。

如何使用JQuery排除菜单的ul？

1 个答案: