Question

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>

我正在创建一个网络应用程序，其中我有一个侧导航栏它在大屏幕上工作正常但在小屏幕我想关闭按钮单击导航栏但它不工作我尝试以下代码但我不是能够成功

Answer 1

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

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

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

关闭响应式响应左侧按钮单击按钮jquery C＃

1 个答案: