CSS - 从 iPhone 和 Safari 的选择菜单中隐藏选项

Posted 2023-03-05

【中文标题】CSS - 从 iPhone 和 Safari 的选择菜单中隐藏选项

【英文标题】：CSS - Hide Options From Select Menu on iPhone & Safari

【发布时间】：2016-07-04 04:17:48

【问题描述】：

所以我有一个使用选择菜单进行移动导航的网站。我需要从列表中隐藏一些选项，并且已经能够在除 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/

【参考方案1】：

使用 Jquery，您可以将 prop("disabled", true) 与 hide() 一起使用。像这样：

$(this).prop("disabled", true); // for safari
$(this).hide();

这种方式选项将在大多数浏览器中隐藏。在 Safari 中，它们将可见但被禁用。

我认为这是一个不错的选择。

【参考方案2】：

我发现删除项目比隐藏它们更容易。

$(this).remove();

【参考方案3】：

我在尝试隐藏我的选择（来自扩展）中的选项时在 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>

【参考方案4】：

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

【参考方案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/

【参考方案6】：

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

使用 jQuery 隐藏 ios：

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

使用 jQuery 为 iOS 取消隐藏：

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

【参考方案7】：

你不能。 Safari 为下拉菜单使用了覆盖层...您实际上必须删除它们......有一个 hack 使用跨度作为无效语法...虽然不建议使用无效语法

【参考方案8】：

你有很多选择取决于你想要什么，我发现display: none 在 safari 上不起作用，所以这里有一个替代方法：

您可以简单地将其设置为超级小且不可见：

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

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

祝你好运！

【讨论】：

感谢您的回答！不幸的是，这也不起作用。这看起来很奇怪，因为我可以在 Safari 中检查元素并看到 css 规则明显被应用但仍然无法正常工作。

可以加个截图吗？

如果网站在网络上，或者提供指向该网站的链接？