根据屏幕大小禁用Javascript效果
Disable Javascript effect based on the screen's size
我刚刚做了一个搜索栏，点击搜索图标后会展开（这是用javascript制作的）。现在做响应式设计，我想禁用javascript。我现在来找你尝试找到一个禁用javascript效果的方法。
我的源代码在这里供您试用，请确保您调整屏幕大小以使响应生效。
body{
padding:0;
margin:0;
font-family: Arial, sans-serif;
}
.header-two-bars{
font:13px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-limiter{
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
/* Logo */
.header-two-bars h1{
float: left;
font: normal 35px Cookie, Calibri, Helvetica, sans-serif;
line-height: 40px;
margin: 0;
}
.header-two-bars h1 span {
color: #5383d3;
}
/* The first bar */
.header-two-bars .header-first-bar{
background-color:#292c2f;
box-shadow:0 1px 1px #ccc;
padding: 20px 40px;
height: 80px;
color: #ffffff;
box-sizing: border-box;
}
.header-two-bars .header-first-bar a {
color: #ffffff;
text-decoration: none;
}
.member-area-buttons {
float: right;
}
.signup-button, .login-user, .login-designer {
font-size: 13px;
float: left;
font-weight: bold;
border-radius: 3px;
background-color: #5383d3;
color: white;
height: 40px;
padding: 5px 20px;
border: 1px solid #5E6367;
box-sizing: border-box;
margin-right: 5px;
}
.signup-button:hover, .login-user:hover, .login-designer:hover{
background-color:#2B5773;
}
.signup-button{
padding-top: 10px;
margin-top: 0;
border-radius: 2px;
background-color: #6caee0;
color: #ffffff;
font-weight: bold;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
border: 0;
}
/*social-button*/
/*
.header-two-bars .header-first-bar nav i.fa {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-top: 0;
margin-right: 3px;
}
*/
/* Second Bar */
.header-two-bars .header-second-bar {
background-color: #ffffff;
box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.05);
padding: 20px 40px;
}
.header-two-bars .header-second-bar h2 {
margin: 0;
float: left;
color: #292c2f;
font-weight: bold;
font-style: italic;
}
.header-two-bars .header-second-bar h2 a {
font-size: 16px;
color: #4e5359;
text-decoration: none;
}
.header-two-bars .header-second-bar nav {
text-align: right;
line-height: 20px;
font-size: 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font:14px Arial, Helvetica, sans-serif;
}
.header-two-bars .header-second-bar nav a{
display: inline-block;
color: #4e5359;
text-decoration: none;
padding-left: 12px;
padding-right: 12px;
}
.header-two-bars .header-second-bar nav a:last-child{
color: red;
}
.header-two-bars .header-second-bar nav a:hover{
border-radius: 2px;
background-color: #2B5773;
padding-top:8px;
padding-bottom: 8px;
color: white;
opacity: 0.7;
}
.header-two-bars .header-second-bar nav a.selected{
border-radius: 2px;
background-color: #2B5773;
padding: 8px 12px;
color: white;
}
.header-two-bars .header-second-bar nav i.fa {
color: #A9B7BF;
margin: 0 4px 0 0;
}
/* Responsive Design */
@media all and (max-width: 800px) {
.header-two-bars .header-second-bar nav{
font-size:14px;
}
.header-two-bars .header-first-bar h1 {
font-size: 29px;
margin-left: -10px;
margin-right: 10px;
}
}
@media all and (max-width:590px) {
.header-two-bars .header-first-bar{
height: 120px;
padding:20px;
padding-bottom: 20px;
}
.header-two-bars .header-first-bar h1 {
float: none;
margin: -8px 0 2px;
text-align: center;
font-size: 28px;
padding-bottom: 20px;
line-height: 1;
}
/*social-button
.social-button {
float:left;
}
.header-two-bars .header-first-bar nav i.fa {
display:inline-block;
font-size:20px;
}
*/
.signup-button, .login-user, .login-designer {
font-size: 12px;
}
.header-two-bars .header-second-bar{
padding: 20px 0;
}
}
@media all and (max-width: 610px) {
.header-two-bars .header-second-bar h2{
float:none;
margin: 0 0 12px;
}
.header-two-bars .header-second-bar nav{
text-align: center;
}
.header-two-bars .header-second-bar nav a{
display: block;
padding: 8px;
}
.header-two-bars .header-second-bar nav i.fa{
margin-left:0;
}
}
@media all and (max-width: 465px) {
.header-two-bars .header-first-bar{
padding: 5px;
padding-top: 15px;
}
.signup-button, .login-user, .login-designer {
font-size: 12px;
padding: 5px 10px 5px 10px;
border: 1px solid #5E6367;
box-sizing: border-box;
width: 76px
}
.signup-button{
padding-top:10px;
}
}
@media all and (max-width: 320px) {
.header-two-bars .header-first-bar{
height: 180px;
}
/*Social Button
.social-button {
float: none;
margin: 0 auto;
display:inline-block;
margin-top: 10px;
}
*/
.member-area-buttons {
float:none;
text-align: center;
}
/*.signup-button, .login-user,*/ .login-designer {
float: none;
display: inline-block;
}
.signup-button {
float:left;
margin-left:10px;
}
.login-user {
float:right;
margin-right:10px;
}
}
/* The search box */
.header-search form {
float:right;
position: relative;
right: 10px;
border-radius: 3px;
background-color: #3a3c3e;
width: 44px;
height: 40px;
cursor: pointer;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/* CSS search icon */
.header-search form:before {
position: absolute;
content: '';
border-radius: 50%;
border: 2px solid #fff;
width: 9px;
height: 9px;
top: 12px;
left: 14px;
}
.header-search form:after {
position: absolute;
content: '';
background-color: #fff;
width: 2px;
height: 8px;
top: 22px;
left: 26px;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
transform: rotate(-44deg);
}
/* The search box */
.header-search form input {
display: none;
position: absolute;
left: 42px;
padding: 11px 12px 9px;
border: none;
width: 210px;
border-radius: 2px 0 0 2px;
height: 40px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Making the header responsive. */
@media all and (max-width: 590px) {
.header-search form {
float: left;
left: 5px;
}
}
@media all and (max-width: 320px) {
.header-search form {
float: none;
display: block;
text-align: center;
top: 20px;
left: 12px;
width: 78%;
}
.header-search form input {
display: inline-block;
width: 100%;
}
.stop_javascript {
display: none;
}
}
@media all and (max-width: 300px) {
.header-search form {
left: 9px;
}
}<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1><a href="#">Africa<span>Fashion</span></a></h1>
<div class="member-area-buttons">
<a href="form-register.html" class="signup-button">Sign Up</a>
<a href="form-login-designer.html" class="login-designer">Login <br/> Designer</a>
<a href="form-login-user.html" class="login-user">Login <br/> User</a>
</div>
<div class="header-search">
<form method="get" action="#">
<input type="search" placeholder="Search!" name="search">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.header-search form').on('click', function(e) {
// If the form (which is turned into the search button) was
// clicked directly, toggle the visibility of the search box.
if(e.target == this) {
$(this).find('input').toggle();
}
});
});
</script>
</div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<h2><a href="#">Hi,</a></h2>
<nav>
<a href="content/index.html"><i class="fa fa-male"></i> Men</a>
<a href="content/index.html" class="selected"><i class="fa fa-female"></i> Women</a>
<a href="content/index.html"><i class="fa fa-folder-o"></i> Latest Collection</a>
<a href="content/index.html"><i class="fa fa-check"></i> Designers</a>
<a href="content/index.html"><i class="fa fa-check" style="color: red;"></i> Northern Fashion</a> <!-- It should be red-->
</nav>
</div>
</div>
</header>
谢谢
您可以尝试在运行切换之前检查窗口宽度（您需要将 minWidth 更改为应用程序所需的最小宽度）：
$(document).ready(function() {
$('.header-search form').on('click', function(e) {
// If the form (which is turned into the search button) was
// clicked directly, toggle the visibility of the search box.
if(e.target == this && window.innerWidth > minWidth) {
$(this).find('input').toggle();
}
});
});
相关文章：
- 在这个幻灯片中没有淡出效果JavaScript，CSS和HTML
- 如何在JavaScript中创建打字机效果，这将考虑html标记规则
- 使用香草JavaScript的脉冲效果
- 链接don'由于Javascript悬停效果，无法在移动设备上工作
- 使用javascript应用视差效果时，图像会发生抖动
- 使用javascript创建幻灯片效果
- 第二个下拉菜单元素上的重复下拉Javascript效果
- 不需要的Javascript效果:原型在实例之间共享闭包
- 根据屏幕大小禁用Javascript效果
- 与父项相邻的 Javascript 效果元素
- 渲染带有JavaScript效果的轨道视图，如淡入，幻灯片等
- 为什么菜单JavaScript效果不起作用
- 点击相同的按钮来逆转Javascript效果
- Javascript效果在“隐身模式”下工作(铬)
- 在手机和桌面上的Bootstrap 3下拉列表中添加不同的JavaScript效果
- 如何抓取具有javascript效果的页面
- 褪入黑色jQuery或Javascript效果?的存在
- JavaScript效果只适用于50%的猫头鹰旋转木马
- javascript效果不正确
- 将Javascript效果延迟500毫秒
