Question

我正在尝试在我的网页上添加侧边栏导航面板。使用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>

Answer 1

只需将班级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>

侧边栏显示页面第一次加载时

1 个答案: