[英]sidebar showing when the page loads for the first time
我正在尝试向我的网页添加侧边栏导航面板。 使用js html和css进行操作。当我第一次加载页面时，它甚至在单击该图标之前就显示了侧边栏。 首次加载页面时，如何防止自动打开侧边栏？ 提前致谢！！！ 代码如下...
$(document).ready(function(){ $(".fa-times").click(function(){ $(".sidebar_menu").addClass("hide_menu"); $(".toggle_menu").addClass("opacity_one"); }); $(".toggle_menu").click(function(){ $(".sidebar_menu").removeClass("hide_menu"); $(".toggle_menu").removeClass("opacity_one"); }); });
/*side navigation bar*/ .toggle_menu{ cursor:pointer; z-index: 1000000; opacity: 0; } .sidebar_menu{ position: fixed; width: 20em; margin-left: 0px; overflow: hidden; height: 100vh; max-height: 100vh; background-color: rgba(17,17,17,0.9); opacity: 0.9; transition: all 0.3s ease-in-out; left:0px; } .fa-times{ right: 1em; top : 1em; opacity: 0.7; cursor: pointer; position: absolute; color: #8bea8b; transition: all 0.3s ease-in-out; } .fa-times:hover{ opacity: 1; } .hide_menu{ margin-left: -20em; } .opacity_one{ opacity: 1; transition: all 0.3s ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <title>Forestpin</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" /> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". --> <script src="fullpage/vendors/jquery.easings.min.js"></script> <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` --> <script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage/jquery.fullPage.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="sidemenu.js"></script> </head> <body> <!--top navigation bar--> <nav class="navbar navbar-default header navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="images/logofpin.png" id="logofpin"> </a> <img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu" id="logo2"> <div class="sidebar_menu"> <i class="fa fa-times"></i> </div> </div> </div> </nav>
只需将opacity_one类opacity_one到徽标div，将hide_menu到侧栏div。 检查以下更新的代码段！
$(document).ready(function(){ $(".fa-times").click(function(){ $(".sidebar_menu").addClass("hide_menu"); $(".toggle_menu").addClass("opacity_one"); }); $(".toggle_menu").click(function(){ $(".sidebar_menu").removeClass("hide_menu"); $(".toggle_menu").removeClass("opacity_one"); }); });
/*side navigation bar*/ .toggle_menu{ cursor:pointer; z-index: 1000000; opacity: 0; } .sidebar_menu{ position: fixed; width: 20em; margin-left: 0px; overflow: hidden; height: 100vh; max-height: 100vh; background-color: rgba(17,17,17,0.9); opacity: 0.9; transition: all 0.3s ease-in-out; left:0px; } .fa-times{ right: 1em; top : 1em; opacity: 0.7; cursor: pointer; position: absolute; color: #8bea8b; transition: all 0.3s ease-in-out; } .fa-times:hover{ opacity: 1; } .hide_menu{ margin-left: -20em; } .opacity_one{ opacity: 1; transition: all 0.3s ease-in-out; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <title>Forestpin</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" /> <link rel="stylesheet" type="text/css" href="theme.css"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". --> <script src="fullpage/vendors/jquery.easings.min.js"></script> <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` --> <script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script> <script type="text/javascript" src="fullpage/jquery.fullPage.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="sidemenu.js"></script> </head> <body> <!--top navigation bar--> <nav class="navbar navbar-default header navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="images/logofpin.png" id="logofpin"> </a> <img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu opacity_one" id="logo2"> <div class="sidebar_menu hide_menu"> <i class="fa fa-times"></i> </div> </div> </div> </nav>
首次加载页面时，javascript为ipad设置绝对位置
[英]javascript setting absolute position for ipad when the page loads the first time
首次加载页面时，然后在时间段之后执行jQuery代码
[英]Execute jQuery code when page loads for first time and then after time period
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.