列表父/子

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