關閉響應敏感，leftbar

CSS關閉響應敏感，leftbar

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

我創建一個web應用程序中，我有一個側導航欄，它正在大屏幕上正常，但在小屏幕上，我想關閉按鈕點擊導航欄，但它不工作我試着下面的代碼，但我不能成功

來源

2016-09-03 API Controls

您正在設置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>

來源

2016-12-01 04:39:28

關閉響應敏感，leftbar

回答

相關問題