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屋！