Question

我是一个jQuery新手。我喜欢使用jQuery，并试图改善它。

我将以下列表作为菜单：

Page home：没有孩子

<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

这里有一个解决方案：

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 2

你可以简化你的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>。 <li>内的所有.menu现在都有边框。要从<li>的最后一个子.menu中删除边框（如果它有子菜单），您可以使用以下代码。

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

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

Answer 3

在Edgar和Amrit的帮助下进行了一些测试之后我决定了这个

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

埃德加我无法让你的解决方案起作用，可能是我所做的。当我第一次测试你的解决方案时，阿米特笨拙地工作了，但当我更改了页面名称时，它停止了运行。

我很感谢您帮助我找到解决方案的时间

干杯 LRL

列出父母/孩子

3 个答案: