Question

所以我有一个网站正在使用移动导航的选择菜单。我需要隐藏列表中的一些选项，并且除了Safari和iPhone之外，所有浏览器和设备都能够这样做。

这是我用来删除列表中第7-11项的CSS：

select.select-menu option:nth-child(n+7):nth-child(-n+11){
display: none !important;}

这在Chrome和我的Android手机上正常运行。但是，当您在Safari或iPhone上查看该网站时，这些选项不会被隐藏并仍会显示。

我已经尝试了几个选项，并就此问题进行了大量研究，无法找到解决方案。我尝试使用jQuery从列表中删除项目，并且无法使其工作。

有没有办法可以隐藏iPhone和Safari上的选项？

编辑：

这是一个小提琴： https://jsfiddle.net/cv6rubua/3/

Answer 1

只有这对我有用 - 包装你需要隐藏的元素。如果隐藏与页面上的某些操作相关联，则“if-check”不包装两次。

使用jQuery隐藏iOS：

if( !($(this).parent().is('span')) ) $(this).wrap('<span>');

使用jQuery取消隐藏iOS：

if( ($(this).parent().is('span')) ) $(this).unwrap();

Answer 2

我在Safari中也遇到了困难，试图隐藏我的选择（来自扩展程序）中的选项，并决定走这条路。

要“隐藏”我选择的选项，我将 option 替换为 div ，然后再次返回到 option 再次显示。

//if any div exists change back to option
function showAll(){
var nodesSnapshot = document.evaluate("//select/div", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('option');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

//replace all option that contain text with div
function hideSome(){
var nodesSnapshot = document.evaluate("//select/option[text()[contains(.,'HideMe')]]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('div');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

//replace all option with div
function hideAll(){
var nodesSnapshot = document.evaluate("//select/option", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
  var nodeA = nodesSnapshot.snapshotItem(i);
  var elemA = document.createElement('div');
  elemA.innerHTML = nodeA.innerHTML;
  nodeA.parentNode.replaceChild(elemA, nodeA);
}
}

<button onclick="showAll();">showAll</button>
<button onclick="hideSome();">hideSome</button>
<button onclick="hideAll();">hideAll</button>


<select>
<option>HideMe</option>
<option>HideMe</option>
<option>ShowMe</option>
<option>HideMe</option>
<option>ShowMe</option>
</select>

Answer 3

根据您的需要，您有多种选择，我发现display: none不适用于Safari，所以这是另一种方法：

你可以简单地让它变得非常小而且看不见：

opacity: 0;
height: 0;
width: 0;
overflow: hidden;

这应该很好用，并且应该得到chrome和safari的支持！

祝你好运！

Answer 4

你做不到。 Safari使用叠加层进行下拉菜单...你真的必须删除它们....有一个黑客使用跨度作为无效语法...不建议使用无效语法

Answer 5

您可以使用JavaScript解决此问题

var selectOption = document.querySelectorAll('.select-menu option');

for (var i = 0; i < selectOption.length; i++) {
  var item = selectOption[i];
  if (item.innerHTML.charAt(0) === "–") {
    item.remove();
  };
}

我已经使用动态JavaScript解决方案分配了jsfiddle：https://jsfiddle.net/davidgumzchoi/05ocw2x0/

Answer 6

对我有用的解决方案是创建另一个隐藏选择所有选项，并将相关选项克隆到可见选择。这样，您可以显示一个要显示的选项，但仍保留隐藏列表中其他选项的记录。

Answer 7

我发现删除项目而不是隐藏项目更加容易。

$(this).remove();

CSS - 隐藏选项从iPhone上的选择菜单＆amp;苹果浏览器

7 个答案: