gpt4 book ai didi

jquery - 通过 jquery 切换 bootstrap 侧边栏

转载 作者:行者123 更新时间:2023-11-28 07:17:22 25 4
gpt4 key购买 nike

我已经完成了如何使用 startbootstrap-simple-sidebar css 切换 boostrap 侧导航栏,它基于 boostrap css

这是可以正常工作的示例代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet" type="text/css" />
<%--Add the css reference here--%>
<link href="../css/simple-sidebar.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$("#ToggleSideMenu").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span>
</button>
<a class="navbar-brand" href="/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
</div>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><a href="#">Start Bootstrap </a></li>
<li><a href="#">Home</a> </li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<br />
<br />
<a href="#ToggleSideMenu" class="btn btn-default" id="ToggleSideMenu">Toggle Menu</a>
<hr />
<footer>
<p>&copy; 2015 - My ASP.NET Application</p>
</footer>
</div>
<!-- /#page-content-wrapper -->
</div>
</body>
</html>

图片演示

enter image description here

我有一些不同的要求。

1) 请告诉我要更改代码以使其位于右侧栏。如果可能,请提供更改代码以使其位于右侧栏。

2) 还告诉我我怎么能有一个小的 div 将附加或粘贴到左侧栏,当单击该 div 时,左侧导航栏将折叠和展开,而不是有用于切换菜单的大按钮。这里发布了两个屏幕截图网址,因为我想展示切换左 div 时应该看起来有多小。

请指导我回答我的第 2 个问题。谢谢

enter image description here enter image description here

最佳答案

在菜单的 CSS 中查找 ID

#sidebar-wrapper {} 

然后删除

left: ..px; 

并将其替换为

right: 1px

希望这会有所帮助:)

关于jquery - 通过 jquery 切换 bootstrap 侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32284713/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com