关闭按钮上的响应响应左栏,点击jquery C#
Close responsive responsive-leftbar on button click jquery C#
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">×</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>
相关文章:
- 提高$(..)的响应能力.点击触摸界面
- ng高图表的响应行为,加载时隐藏编译的ng点击xAxis标签
- 尝试使用鼠标点击事件响应编写jQuery HTML5聊天框程序
- 谷歌地图USGSO在同一级别标记上覆盖点击事件多响应
- Youtube iframe没有响应通过上图传递的指针事件的点击:none
- jQuery:点击禁用点击事件,直到ajax调用响应
- FB.getLoginStatus在第二次点击时响应(response.status=connected)
- 如何为 jpg 文件创建响应式视口,供用户缩放、滚动和点击
- 如何在点击时将变量从 AJAX 响应传递到 JS 函数
- HTML表单对点击“输入”按钮没有响应
- JSONP:点击网址并解析响应
- JavaScript,post,button直到第二次点击才会给出服务器响应
- 如何响应 Pebble 的 SetInterval 中的按钮点击
- 带有OMS的谷歌地图-响应点击事件的标记属性
- 通过jquery创建的按钮don't对点击做出响应
- Firefox:“;点击“;关于xhr响应的内容
- 当只有lastChild节点应该响应点击时,是什么导致我的图像节点响应点击
- 当Javascript进程正在进行时,浏览器没有响应点击
- 按钮不响应点击在Ionic
- 为什么用JS插入的HTML不响应点击?