CSS -在iPhone和Safari上隐藏选择菜单中的选项
CSS -在iPhone和Safari上隐藏选择菜单中的选项
提问于 2016-03-18 00:53:35
因此，我有一个网站，它正在使用移动导航的选择菜单。我需要从列表中隐藏一些选项，并且能够在除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/
回答 8
Stack Overflow用户
发布于 2017-06-02 23:37:29
这只对我有效--在元素中包装，你需要隐藏它。如果隐藏与页面上的某个操作相关联，则" if -check“表示不对其进行两次包装。
使用jQuery为iOS隐藏：
if( !($(this).parent().is('span')) ) $(this).wrap('<span>');使用jQuery取消隐藏iOS：
if( ($(this).parent().is('span')) ) $(this).unwrap();Stack Overflow用户
发布于 2019-05-15 23:48:00
我在Safari中尝试隐藏select (从一个扩展)中的选项时也遇到了困难，于是决定走这条路。
要“隐藏”选择中的选项，我将选项替换为div，然后如果我想再次显示它，则再次返回到选项。
//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>
Stack Overflow用户
发布于 2021-08-25 10:55:35
通过Jquery，您可以将prop("disabled", true)与hide()一起使用。如下所示：
$(this).prop("disabled", true); // for safari
$(this).hide();这样，选项将在大多数浏览器中隐藏。在Safari中，它们将是可见的，但被禁用。
我认为这是一个很好的选择。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36066953
复制相关文章
相似问题
腾讯云开发者
