Закрыть отзывчивую отзывчивая-leftbar на кнопку мыши JQuery C#

Question

CSS

.responsive-leftbar { 
    width: 50px; 
    height: 50px; 
    background: #112b39; 
    display: inline-block; 
    position: absolute; 
    display: none; 
    right: -50px; 
    cursor: pointer; 
    text-align: center; 

HTML тег для DIV

<div id="responsivediv" class="responsive-leftbar"> 
<i class="glyphicon glyphicon-menu-hamburger"></i> 
</div> 

HTML тегов для кнопки

<asp:LinkButton ID="lbtnlogout" data-toggle="modal" data-target="#myModal" runat="server" CssClass="btn btn-primary" ForeColor="Black"><span aria-hidden="true" class="glyphicon glyphicon-log-out"></span>Logout</asp:LinkButton> 

Jquery

<script> 
    $('#lbtnlogout').toggle( 
     function() { 
     $('#responsivediv').css('left', '0') 
     }, function() { 
      $('#responsivediv').css('left', '200px') 
    }) 
</script> 

Модальные на кнопку мыши

<div class="modal fade col-lg-offset-3 col-md-offset-2 col-sm-offset-2" style="background-color:transparent; border-radius: 15px 15px 15px 15px; margin-left:33%; margin-top:4%;" id="myModal" role="dialog" > 
    <div class="modal-dialog modal-sm col-lg-offset-3 col-md-offset-2 col-sm-offset-2 col-xs-8" style="margin-left:7%; width:80%; border-radius: 15px 15px 15px 15px;"> 

     <!-- Modal content--> 
     <div class="modal-content" style="margin-left:-7%; width:120%;"> 
     <div class="modal-header" style="background-color:#2C74C5;"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <br /> 

     </div> 
      <div class="modal-header" style="background-color:#2C74C5; margin-top:15px;"> 
      <center> <p style="font-size:14px;">If You Logout, Your Following Information Will Be Removed</p></center> 
      </div> 
     <div class="modal-body" style="margin-top:10px;"> 
      <center> 
      <p style="color:black;">1) Google Information</p> 
      <br /> 
     <p style="color:black;"><asp:Label ID="lblgooglename" runat="server" Text="Your Google Login Credential."></asp:Label></p> 
      <br /> 
      <p style="color:black;">2) Logged In As</p> 
      <br /> 
      <p style="color:black;"><asp:Label ID="lblname2" runat="server" Text=""></asp:Label></p> 
      <br /> 
      <p style="color:black;">3) Your Role</p> 
      <br /> 
      <p style="color:black;"><asp:Label ID="lblrole2" runat="server" Text=""></asp:Label></p> 
      <br /> 
      <br /> 
      </center> 
     </div> 
      <div class="modal-footer" style="background-color:#2c74c5; margin-top:-0px;"> 
        <center>  
         <p style="color:black; font-size:14px; margin-left:-25px; color:white;">Press No If You Don't Wish To Logout, Or Else Press Logout</p> 
        </center> 
      </div> 
     <div class="modal-footer" style="background-color:#2C74C5; margin-top:15px;"> 
      <button type="button" class="btn btn-success active" data-dismiss="modal" onclick="btnlogout_Click">NO</button> 
      <asp:Button ID="btn" runat="server" CssClass="btn btn-warning active" Text="Logout" OnClick="btnlogout_Click" /> 
     </div> 

     </div> 

Я создаю веб-приложение, в котором я боковой Navbar он работает отлично на большом экране, но в маленьком экране я хочу для закрытия навигационной панели при нажатии кнопки, но она не работает. Я пытаюсь выполнить следующий код, но я не могу преуспеть.

Answer 1

Вы устанавливаете атрибут OnClick для y наша кнопка до btnlogout_Click, но я не вижу функцию btnlogout_Click. Если этот сценарий загружается при загрузке DOM, тогда #lbtnlogout будет переключен при загрузке страницы, но ни в какое другое время.

Я думаю, что все, что вам нужно сделать, это поставить код переключения в функцию.

<script> 
    function btnlogout_Click() { 
     $('#lbtnlogout').toggle( 
      function() { 
      $('#responsivediv').css('left', '0') 
      }, function() { 
       $('#responsivediv').css('left', '200px') 
     }); 
    } 
</script>