仅在移动设备上隐藏div
[英]Hiding div on mobile devices only
问题描述
I have a button which acts as a 'copy url' button. 
我有一个按钮充当“复制网址”按钮。 This works fine on none mobile devices, however I believe you can't have such a function on mobile devices as they rely on flash. 这在所有移动设备上都无法正常运行，但是我相信您不能在移动设备上拥有此类功能，因为它们依赖闪存。 On most mobile sites users must manually copy URLs. 在大多数移动网站上，用户必须手动复制URL。
So, I want to remove my 'copy url' button once a mobile device has been detected. 因此，一旦检测到移动设备，我想删除“复制网址”按钮。
Before you grill me, yes I've read: 在您烧烤我之前，是的，我读过：
Hiding DIV if using mobile browser 如果使用移动浏览器，则隐藏DIV
I tried the solution mentioned in that thread, however it does not work. 我尝试了该线程中提到的解决方案，但是它不起作用。 Any idea why? 知道为什么吗？ Here is my codepen: 这是我的codepen：
http://codepen.io/rjtkoh/pen/dPxKeg http://codepen.io/rjtkoh/pen/dPxKeg
<head>
<script>
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
</script>
</head>
<div class= "test">yo test me</div>
Much appreciated. 非常感激。
4 个解决方案
解决方案1
2 已采纳 2015-04-15 16:46:02
It doesn't look like you're doing anything with the mobile variable. 您似乎没有使用mobile变量做任何事情。 But before you can get any further, you have to address the issue that is preventing your $('.test').css('display', 'none'); 但是，在采取进一步措施之前，必须解决阻止$('.test').css('display', 'none'); from hiding the div: 隐藏div：
The DOM element you are referencing does not exist at the time the script is executed. 您正在引用的DOM元素在执行脚本时不存在。 The script should be executed after the DOM element is created, which can be accomplished a couple of ways: 该脚本应在创建DOM元素后执行，这可以通过以下两种方法完成：
Move the
<script>tag to after the element in the HTML.将<script>标记移到HTML中的元素之后。 This assumes that the link to jQuery is somewhere before the script, not after.这假定到jQuery的链接位于脚本之前，而不是之后。 Use jQuery's document.ready() function to execute the JavaScript only after the DOM is ready.
仅在DOM准备就绪后，才使用jQuery的document.ready（）函数执行JavaScript。 Since you're already using jQuery, this is usually the most convenient way to do it. 由于您已经在使用jQuery，因此这通常是最方便的方法。
Eg: 例如：
<script>
$(document).ready(function() {
var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
$('.test').css('display', 'none');
});
</script>
解决方案2
0 2015-04-15 16:51:50
The reason you're seeing this is because the DOM isn't fully built, so when you're trying to access it using $('.test') , it can't get it. 您之所以会看到它，是因为DOM尚未完全构建，因此当您尝试使用$('.test')访问它时，它将无法获取它。 You have to wait until it is fully ready. 您必须等到它完全准备好为止。
Wrap your Javascript code in the ready function provided by jQuery : 将您的Javascript代码包装在jQuery提供的ready函数中：
$(document).ready(function () {
// your code goes here
});
This code will only be executed once all the DOM has been loaded. 仅在所有DOM均已加载后才执行此代码。 Have a look at the documentation . 看一下文档 。
解决方案3
0 2015-04-15 17:01:34
A simple way to do this is just add class to the html element when match some situation. 一种简单的方法是在满足某些情况时将类添加到html元素中。
And use a selector to hide the elements you want you hide only when the class exist 并使用选择器隐藏仅在类存在时要隐藏的元素
This allows you to hide element even the <body></body> haven't actully loaded. 这允许您隐藏元素，即使<body></body>尚未被实际加载。
Besides, it requires minimal DOM operation. 此外，它需要最少的DOM操作。 So it won't lag the page when there are too many elements needed to hide. 因此，当需要隐藏太多元素时，它不会滞后于页面。
Just put the codes in the <head></head> 只需将代码放入<head></head>
<script>
if (navigator.userAgent.search("Some thing") >= 0 ) {
/*the html element*/
var root = document.documentElement;
root.setAttribute( "class", "hide-for-compitibility" );
}
</script>
<style>
html.hide-for-compitibility .selectors{
display : none;
}
</style>
解决方案4
0 2015-04-15 17:29:52
Does anyone look at his codepen? 有人在看他的codepen吗？ Hey guy, 嘿，伙计
you did not include Jquery while using it.
您在使用它时未包含Jquery。 Put this in your HTML section <script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>将其放在您的HTML部分<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>you put your script in wrong section, move it to JS section.
您将脚本放在错误的部分，将其移至JS部分。 the
mobilevariable you obtained should be used in an IF statement.您获得的mobile变量应在IF语句中使用。 Example,例，
if (mobile) $('.test').css('display', 'none'); else $('.test').html('This ELSE leg should be removed');
- Finally, getting the opinion of other answers that you should wrap your code inside a
$(document).ready()function.最后，得到其他答案的意见，您应该将代码包装在$(document).ready()函数中。
Here is an example and it do work. 这是一个示例，它确实起作用。 http://codepen.io/anon/pen/QweBgq http://codepen.io/anon/pen/QweBgq
Another way that does not use Javascript is that you use CSS. 不使用Javascript的另一种方式是使用CSS。 Try below code in CSS section. 请尝试以下CSS部分中的代码。
.test { display: none; } @media (min-width: 768px) { .test{ width: 200px; height: 50px; background: red; display: block; } }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.