如何使用css或jquery定位optgroup的第一個孩子

有沒有一種方法可以將標記爲「Portfolio」的optgroup的第一個孩子顯示名稱「Main」？如何使用css或jquery定位optgroup的第一個孩子

我需要將它從僅顯示在移動菜單中顯示（它不會顯示在桌面菜單中）。這是一個Wordpress小部件無法訪問的WordPress主題菜單。菜單是由媒體查詢觸發的mobilemenu.js創建的（我猜）。它通過2個不同的名稱/菜單項顯示主頁。我希望只針對該菜單項，並使用CSS顯示：無或jQuery getElementByID解決方案，但迄今爲止沒有運氣。在我看來，我似乎無法瞄準它。任何幫助將不勝感激！

<div class="mobilenavi"> 
 
    <select id="mm0" class="mnav" style="display: inline-block;"> 
 
    <option value="undefined">Click here:</option> 
 
    <option value="http://somedomain.com/">Home</option> 
 
    <optgroup label="Portfolios"> 
 
     <option value="#">Main</option> 
 
     <option value="http://somedomain.com/portfolio-1/">Portfolio 1</option> 
 
     <option value="http://somedomain.com/portfolios/portfolio-2/">Portfolio 2</option> 
 
     <option value="http://somedomain.com/portfolios/portfolio-3/">Portfolio 3</option> 
 
     <option value="http://somedomain.com/portfolios/beach-portfolio/">Beach Portfolio</option> 
 
     <option value="http://somedomain.com/portfolios/photos/">Photos</option> 
 
    </optgroup> 
 
    <option value="http://somedomain.com/contact/">Contact Kim</option> 
 
    </select> 
 
</div>

來源

2014-05-14 user11643

這個CSS方法將工作在一些瀏覽器：

Example Here

optgroup[label="Portfolios"] option:first-child { 
    display:none; 
}

由於@canon指出，display:none不會在所有的工作瀏覽器。

如果你想用jQuery刪除它，使用：

Example Here

$('optgroup[label="Portfolios"] option:first-child').remove();

或者，如果你想要一個純JS方法：

Example Here

var el = document.querySelector('optgroup[label="Portfolios"]'); 
el.removeChild(el.getElementsByTagName('option')[0]);

來源

2014-05-14 23:28:30

對於選擇器+1 ...但'display：none'對於'

@canon感謝您指出，我沒有意識到這一點:) –

Josh Crozier，謝謝你的徹底，多方法的答案。什麼都沒有爲我工作呢。調整大小時，CSS可在桌面瀏覽器中運行，以觸發手機尺寸的媒體查詢，但不支持Android Chrome瀏覽器。在wp_head/wp_footer主題沒有運氣掛鉤之前，曾嘗試在頁腳和標題中添加jquery/js解決方案。我認爲js/jquery將在腳本中使用$（function（）{// code}）;但那裏沒有運氣。很顯然，我早在jQuery學習曲線中。我確實認爲你的答案會在正常的主題下工作，並且會標記爲解決方案。謝謝你的幫助。 – user11643

不$（'optgroup option：nnth-child（1）'）。hide（）;工作？

來源

2014-05-14 23:29:46 user2407400

嘗試過這也沒有運氣，但感謝user2407400。 – user11643

如何使用css或jquery定位optgroup的第一個孩子

回答

相關問題