如何使用css或jquery针对optgroup的第一个子组？

Question

有没有办法将标有"Portfolio“并显示名称"Main”的optgroup的第一个子组作为目标？

我需要删除它只显示在移动菜单(它不显示在桌面菜单)。这是一个Wordpress主题菜单，菜单小部件无法访问它。菜单是由媒体查询(我猜)触发的mobilemenu.js创建的。它以两个不同的名称/菜单项目显示主页。我希望只针对这个菜单项目，并使用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>

​

Answer 1

这种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]);

Answer 2

$('optgroup选项:nth-child(1)‘).hide()；工作吗？