列表父/子

Question

我是jQuery新手。我喜欢使用jQuery，并试图让它变得更好。

，我有以下列表作为菜单：

页首页：无子

<ul class="menu"> 
<li>Team 1 Photos</li> 
<li>Team 2 Photos</li> 
<li>Group Activities</li> 
</ul> 

子页面有子

<ul class="menu"> 
<li>Team 1 Photos</li> 
<li>Team 2 Photos</li> 
<li>Group Activities 
    <ul class="children"> 
    <li>Team 1 News</li> 
    <li>Team 2 News</li> 
</ul> 
</li> 
</ul> 

我的CSS是：

ul.children { 
    width: auto; 
    margin-left: 0; 
} 
ul.children li{ 
    border-bottom:1px solid #999; 
    margin-bottom: 10px; 
    padding-bottom: 3px; 
} 
ul.children li:last-child{ 
    border-bottom:1px solid #999 !important; 
} 
ul.menu { 
    width: auto; 
    margin-left: 0; 
} 
ul.menu li{ 
    border-bottom:1px solid #999; 
    margin-bottom: 10px; 
    padding-bottom: 3px; 
} 
ul.menu li:last-child{ 
    border-bottom:none; 
} 

我在努力实现;如果没有孩子，最后<li>有边界底部。 最后<li>有没有边界，如果有一个孩子

我希望我做的意义

我已经试过的方式来直接应用边界是/否或加个班，所以我可以应用该样式：

jQuery('#menu ul li:has(ul)').parent('li').prev()).css('border','1px solid #000'); 

---

if (jQuery('.menu li:has(ul)')) { 
    ('ul.menu li:last-child').add Class('borderme'); 

---

jQuery('.menu li:has(ul)').append('borderyes'); 

---

现在我被卡住了，所以请把我引向正确的方向，这样我就可以学会如何实现这一点。

谢谢

LRL

Answer 1

你可以简化你的CSS。

ul.menu, ul.children { 
     width: auto; 
     margin-left: 0; 
    } 
ul.menu li{ 
     border-bottom:1px solid #999; 
     margin-bottom: 10px; 
     padding-bottom: 3px; 
    } 

你并不需要单独.children款式因为.menu后代选择会照顾所有<li>在您的标记。现在.menu中的所有<li>都将具有边框。若要删除最后一个孩子<li>的.menu的边框（如果它有子菜单），可以使用以下代码。

$('ul.menu > li:last-child').has('ul').css('border-bottom','none'); 

请注意，我在jquery中使用了一个子选择器，而不是后代选择器。

Answer 2

在这里你有一个解决办法：

ul.children { 
     width: auto; 
     margin-left: 0; 
    } 
    ul.children li{ 
     border-bottom:1px solid #999; 
     margin-bottom: 10px; 
     padding-bottom: 3px; 
    } 
    /* Remove this css rule 
    ul.children li:last-child{ 
     border-bottom:1px solid #999 !important; 
    } 
    */ 
    ul.menu { 
     width: auto; 
     margin-left: 0; 
    } 
    ul.menu li{ 
     border-bottom:1px solid #999; 
     margin-bottom: 10px; 
     padding-bottom: 3px; 
    } 
    /* Remove this css rule 
    ul.menu li:last-child{ 
     border-bottom:none; 
    }*/ 

而且，有以下的jQuery：

$(document).ready(function(){ 
    $("ul.menu li:last-child:has(ul)").css("border-bottom", "none"); 
}); 

只有当我们删除的边界li有一个孩子。

希望这会有所帮助。欢呼声 希望这会有所帮助，欢呼声。

Answer 3

基于来自埃德加和阿姆里特帮助多一点的测试后，我对这个

jQuery('.menu li').has('ul').css({'border' : 'none','margin-bottom' : '0'});        

埃德加落户我不能让你的解决方案正常工作，可能是我做的事。 当我第一次测试你的解决方案时，它一直很努力，但是当我改变页面名称时，它停止了运行。

我很欣赏你在帮助我找到一个解决方案

干杯给出的时间 LRL