Question

我不知道为什么我的代码不能正常工作，并且fa-bars没有打开和关闭我觉得jquery代码中有问题请帮帮我。

TransitionManager.beginDelayedTransition(statusLayout, Fade(Fade.IN))

firstLine.alpha = 1.0f

TransitionManager.beginDelayedTransition(statusLayout, ChangeBounds())

firstLine.layoutParams.height = 200

TransitionManager.beginDelayedTransition(statusLayout, Fade(Fade.IN))

myLabel.alpha = 1.0f

Navigation Image

Answer 1

使用。类.fa-times的点，.toggle_menu ...如果您在包含jquery之前的click事件需要将代码包装在$（document）.ready（function（）{// code here}）< / p>

<html>
   <head>
   </head>
   <body>
      <i class="fa fa-bars toggle_menu"></i> <div class="sidebar"> <i class="fa fa-times"></i> <center><br><img src="http://cpi.caribbeanprocurementinstitute.com/wp-content/uploads/2018/04/logo-2.png"> </center> <ul> <li><a href="" style="color:#FFF;">Home</a></li> <li><a href="" style="color:#FFF;">Who We Are</a></li> <li><a href="" style="color:#FFF;">What We Do</a></li> <li><a href="" style="color:#FFF;">Blog</a></li> <li><a href="" style="color:#FFF;">Contact Us</a></li> </ul> </div> 
    <script type="text/jscript">
       $(document).ready(function(){
          $(".fa-times").click(function(){
            $(".sidebar").hide(); 
          });
          $(".fa-bars").click(function(){
            $(".sidebar").show(); 
          });
      });
     </script>
     <script src="https://code.jquery.com/jquery-3.2.1.js"> </script>
   </body>
</html>

＆＃13;

.sidebar{ 
 position:fixed; 
 top:30px; width:250px; 
 height:100vh;
 max-height:100vh; 
 overflow:hidden; 
 background-color: rgba(17, 17, 17,0.9); 
 opacity:0.9; 
 transition:all 0.3s ease-in-out; 
 right : -250px; 
}

.sidebar.show{
  right : 0px;
  transition:all 0.3s ease-in-out;
}

.toggle_menu{
	z-index:1000000;
	font-size:3em;
	position:fixed;
	float:right;
	right:10px;
	top:30px;
	padding:15px 20px 15px 15px;
	margin-top:0px;
	color:black;
	cursor:pointer;
	opacity:0.9;
  transition:all 0.3s ease-in-out;
}

.toggle_menu.convert{
  right : 250px;
  transition:all 0.3s ease-in-out;
}

＆＃13;

<html>
       <head>
          <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
          <script src="https://code.jquery.com/jquery-3.2.1.js"> </script>
       </head>
       <body>
          <i class="fa fa-bars toggle_menu"></i> 
          <div class="sidebar"> 
          <center><br><img src="http://cpi.caribbeanprocurementinstitute.com/wp-content/uploads/2018/04/logo-2.png"> </center> 
          <ul> 
          <li><a href="" style="color:#FFF;">Home</a></li> 
          <li><a href="" style="color:#FFF;">Who We Are</a></li> 
          <li><a href="" style="color:#FFF;">What We Do</a></li> 
          <li><a href="" style="color:#FFF;">Blog</a></li> 
          <li><a href="" style="color:#FFF;">Contact Us</a></li> 
          </ul> 
          </div>
        <script type="text/jscript">
           $(document).ready(function(){
              $(".toggle_menu").click(function(){
                $(".sidebar").toggleClass('show'); 
                $(".toggle_menu").toggleClass(' convert fa-bars fa-times'); 
              });
          });
         </script>
       </body>
    </html>

＆＃13;

我的侧导航推杆没有切换

1 个答案: