CSS - 从 iPhone 上的选择菜单中隐藏选项 &苹果浏览器 [英] CSS - Hide Options From Select Menu on iPhone & Safari

问题描述

所以我有一个使用移动导航选择菜单的网站.我需要从列表中隐藏一些选项，并且能够在除 Safari 和 iPhone 之外的所有浏览器和设备上进行隐藏.

So I have a site that is using a select menu for the mobile navigation. I'm needing to hide a few options from the list, and have been able to so on all browsers and devices except for Safari and iPhone.

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

Here's the css I used to remove items 7-11 on the list:

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

这在 Chrome 和我的 android 手机上按预期工作.但是，当您在 Safari 或 iPhone 上查看该站点时，这些选项不会隐藏并且仍会显示.

This is working as expected in Chrome and on my android phone. However, when you view the site in Safari or on an iPhone the options are not hidden and still show up.

我尝试了多种选择，并针对此事进行了大量研究，但找不到解决方案.我尝试使用 jQuery 从列表中删除项目，但也无法正常工作.

I've tried several options and done a lot of research on the matter and can't find a solution. I tried removing items from the list using jQuery and couldn't get that to work either.

有什么方法可以隐藏 iPhone 和 Safari 上的选项吗?

Is there a way I can hide the options on iPhone and Safari as well?

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

推荐答案

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

Only this works for me - wrap in element you need to hide it. "if-check" for not wrapping it twice if hiding connected with some action on page.

使用 jQuery 为 iOS 隐藏:

Hide for iOS with jQuery:

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

使用 jQuery 为 iOS 取消隐藏:

Unhide for iOS with jQuery:

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

这篇关于CSS - 从 iPhone 上的选择菜单中隐藏选项 &苹果浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！