Question

如果鼠标悬停在我的导航中，我基本上想要添加箭头。但是应该适用两条规则：

它必须是TOP父级（我已在代码中解析）
必须有CHILD元素（UL）子菜单等（这是问题！）

我不能，不管我做了什么，只有在有条件后才能显示它是否先检查是否有孩子。现在这两个链接都包含了孩子，而且没有显示箭头..请帮助我。

我的代码：

$("#menu ul").css({display: "none"}); // Opera Fix
$("#menu li").hover(function(){
    if (($(this).parent().attr("id") == 'menu')) {
    $(this).append('<span class="arrow"></span>');
    }
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideToggle(500);
},function(){
    if ($(this).parent().attr("id") == 'menu') {
    $('.arrow').remove();
    }
    $(this).find('ul:first').css({visibility: "hidden"});
});

问题：如何添加＆amp;＆amp;条件if到this.parent（）。attr（“id”）=='菜单检查LI是否有子/ sub UL

我试过$（this）.next（）。是（'ul'）没有运气！它仍然附加所有带有孩子的物品，没有。

需要您的意见。

Answer 1

你真的不需要if()声明。只需在选择器中要求li是#menu的孩子。

我认为#menu元素位于顶部<ul>，而.hide()则隐藏了子级<ul>元素。

如果没有看到您的HTML，我不确定这是否正是您所需要的，但请尝试一下：

$("#menu > li:has(ul)").hover(function(){
    $(this).append('<span class="arrow"></span>')
           .find('ul:first').css({visibility: "visible",display: "none"}).slideToggle(500);
},function(){
    $(this).children('.arrow').remove()
           .end().find('ul:first').css({visibility: "hidden"});
});

因此，如果<li>为#menu <ul>，direct child为{{1}}后代{{1}}，则只会触发悬停。

Answer 2

如果您要在悬停事件处理程序中检查li元素的父级是否为#menu，那么您也可以只选择{{1}的直接后代。使用直接后代选择器#menu。

假设>子菜单元素是ul元素的子元素（因为另一个#menu > li元素中的ul元素是无效的HTML），此代码应该工作：

ul

此代码也使用$("#menu > li").hover(function(){ var $this = $(this); if ($this.children('ul').length) { $this.append('<span class="arrow"></span>'); } $this.find('ul:first').hide().slideToggle(500); },function(){ $('.arrow').remove(); $(this).find('ul:first').hide(); });函数而不是稍微混乱的hide()

Answer 3

if($(this).parent("#id")) { ... }应该有效，因为parent（）只查看直接父母。

找到父母的身份证件后，

if($(this).parent("#id").children("ul")) { ... }会有效，并且它有一个直接的孩子<ul />

另一种方法是：

function doToggle(element){
    element.children('ul').css({visibility:"visible", display:"none"}).slideToggle(500);
}
function doHide(element){
    element.children('ul').css({visibility:"hidden"});
}
$("#menu li").hover(function(){
    doToggle($(this));
},
function(){
    doHide($(this));
});
$("#menu > li").hover(function(){
    $(this).append('<span class="arrow"></span>');
},
function(){
    $('.arrow').remove();
});

这样，您就不需要遍历DOM了。

Answer 4

首先，当您将悬停事件绑定到#menu > li时，您不必检查它是否为直接子项（即顶级项）。然后继续并简单地查询第二个条件：

$('#menu > li').hover(function() {
    if ( !$(this).find('ul').length ) return;

    $(this).append('<span class="arrow"></span>');
    ....
}, function() {
    // Just try to remove it, jQuery won't operate on empty sets anyways
    $('span.arrow', this).remove();
    ...
});

你走了。

如果LI元素是父元素并且具有UL（子元素或子菜单），如何附加此跨度

4 个答案: