关闭按钮上的响应响应左栏,点击jquery C#

Close responsive responsive-leftbar on button click jquery C#

本文关键字:响应 点击 jquery 关闭按钮      更新时间:2023-09-26

CSS

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

div的HTML标签

 <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>

我正在创建一个web应用程序,其中我有一个侧导航栏,它在大屏幕上运行良好,但在小屏幕上我想在点击按钮时关闭导航栏,但它不起作用。我尝试了以下代码,但我无法成功

您正在将按钮的OnClick属性设置为btnlogout_Click,但我看不到btnlogout_Click函数。如果在加载DOM时正在加载该脚本,则在加载页面时将切换#lbtnlogout,但不会在其他时间切换。

我认为您所需要做的就是将切换代码放入函数中。

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