- bootstrap 如何隐藏左边菜单栏
-
下面代码是一个模板页面，bootstrap如何控制点击按钮，左边菜单栏隐藏，右边内容自动扩大
<!-- topbar ends --> <div class="ch-container"> <div class="row"> <!-- left menu starts --> <div class="col-sm-2 col-lg-2" style="padding-left:0px;padding-right:0px;"> <div class="sidebar-nav"> <div class="nav-canvas"> <div class="nav-sm nav nav-stacked"> </div> <ul class="nav nav-pills nav-stacked main-menu"> <li class="nav-header">#springMessage("main")</li> #menubar($!{menus},$selectedMenu) </ul> </div> </div> </div> <!--/span--> <!-- left menu ends --> <noscript> <div class="alert alert-block col-md-12"> <h4 class="alert-heading">Warning!</h4> <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p> </div> </noscript> <div id="content" class="col-lg-10 col-sm-10" style="margin-top:10px"> $screen_content </div> </div><!--/fluid-row-->
用JS 吧 我这有快代码你瞅瞅，或许有用
main 是右侧内容块
#list_left是左侧菜单
closeMenu>span 是点击按钮
var moveLeft = $("#list_left").width();
$(".main").css({marginLeft:moveLeft});
var isShow = true;
$(".closeMenu span").click(function(){
$(this).hide().siblings().show();
if(isShow){
$("#list_left").animate({
marginLeft : - (moveLeft-15)
},200,"linear",function(){
isShow = false;
$(".closeMenu > span").css({
opacity:1
});
});
$(".main").animate({margin:"0 auto",marginLeft:15},"linear");
}else{
$("#list_left").animate({
marginLeft : 0
},200,"linear",function(){
isShow = true;
});
$(".main").animate({marginLeft:moveLeft},"linear");
}
});
改class也可以啊，点击让左边隐藏右边的 class="col-lg-12 col-sm-12",左边显示的时候右边的 class="col-lg-10 col-sm-10"
- 其他相关推荐
- bootstrap菜单栏问题,怎么菜单栏不刷新，内容刷新？
- 我用bootstrap做的页面是左边是竖直菜单，右边是内容页面，现在我点击菜单栏上的链接，怎么样才能实现菜单栏不刷新，一直在左边显示，而跳转的页面显示在右边的区域呢？？？
- bootstrap做的下拉菜单如何取得参数
- 我用bootstrap做了一个下拉菜单，如何将下拉菜单的参数取得，比如在选择省份的时候，下拉菜单选了山西省，就能将地址信息取得
- bootstrap做一个下拉菜单，在第一个菜单选择了省以后，第二个下拉菜单会出来该省的市
- bootstrap做一个下拉菜单，在第一个菜单选择了省以后，第二个下拉菜单会出来该省的市
- bootstrap的导航下拉菜单
- 我同通过 jquery load 方法 加载一个导航子html页面，然后我在主页面点击下拉导航，bootstrap下拉导航菜单失效 不知为何
- bootstrap可以竖向的折叠左边的菜单栏么？不是分组的那种
- 系统左边有有个菜单栏，里面的菜单是可以分组折叠，有没有办法可以竖向折叠， 实现的效果就是把左边的菜单栏整体折叠（隐藏），只漏出一个按钮，这个按钮可以控制这个菜单栏的展现和隐藏，bootstrap有提供相应的方法么??? 想在主菜单的位置加一个回收的按钮，控制菜单伸缩，也就是下面代码的main位置  ``` <!-- left menu starts --> <div class="col-sm-2 col-lg-2" style="margin-top:18px;"> <div class="sidebar-nav"> <div class="nav-canvas"> <div class="nav-sm nav nav-stacked"> </div> <ul class="nav nav-pills nav-stacked main-menu"> <li class="nav-header">#springMessage("main")</li> #menubar($!{menus},$selectedMenu) </ul> </div> </div> <div class="auchanlogo"> </div> </div> <!--/span--> <!-- left menu ends --> ```
- bootstrap响应式下拉菜单 小屏时下拉按钮无效
- 在asp.net中使用bootstrap，代码如下： <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div > <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <%--这里ID选择器和类选择器都用过了 --%> <span ></span> <span ></span> <span ></span> </button> <a href="/Index.aspx" target="_blank"> <img src="/_Images/Nulla.jpg" height="100px" width="150px" /></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav" style="font-size: 30px; margin-left: 30px;"> <li runat="server" id="MenuHome"><a href="/Index.aspx">主 页</a></li> <li runat="server" id="MenuProduct"><a href="/Product/Index.aspx">作 品</a></li> <li runat="server" id="MenuAbout"><a href="/About/Index.aspx">关 于</a></li> </ul> </div> </div> 在同页head标签中引用了bootstrap和jquery： <link rel="stylesheet" href="/_Framework/Bootstrap/css/bootstrap.min.css" /> <script src="/_Framework/Bootstrap/js/bootstrap.min.js"></script> <script src="/_Framework/jquery-3.1.0.min.js"></script> 小屏模式截图： 不仅菜单按钮比正常的大，而且单击后无反应，求这段代码里哪里有问题？ （几乎完全复制的webform的自动生成的菜单栏，但是webform框架就可以，我的是从Empty构建的，结果下拉菜单单击就没反应……）
- 关于bootstrap中左侧选择菜单和iframe 或者是tabs页签的提问
- 最近一直在研究这个东西,本人应届生一枚 在bootstrap ACE这种后台模板引擎中 有这种效果 左侧菜单栏点击某一个菜单 ，右侧出现对应的html界面 这种技术是怎么实现的,有大神跟我说 左侧的菜单是通过自己配置一个数据库引擎出现 的菜单按钮，右侧是iframe的技术。 这种回答我还真想不知道怎么弄，我在bootstrap 的插件库中找到了基于这个前端框架 的一个tabs实现添加标签页 实现了 增删功能点。 这还是我看上面的代码一步一步调试和写的 但是原理还是不懂，百度很多资料，杂七杂八的一堆，说是出现的选项卡和显示的便签页和页面的一个hashcode有关，很懵逼。 希望大神们给一个准确的技术知识点，最好是有demo。
- 使用bootstrap如何制作导航栏自适应后连接变成按钮菜单？
- 我用bootstrap框架做了一个导航栏，但自适应后很难看，我想浏览器窗口变小后， 导航栏能自适应，连接那些变成汉堡菜单，我应该怎么做？上网找插件？还是bootstrap 自带这种用法？
- bootstrap如何进行绝对定位
- bootstrap如何进行绝对定位，才会在不同屏幕下都不错位？？？？？
- 基于bootstrap如何把下拉菜单于标签页对应连接起来
- 基于bootstrap如何把下拉菜单于标签页对应连接起来 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#" ><span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span> H. Peng</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a></li> <li><a href="#">特点</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Where <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#元谋">元谋</a></li> <li><a href="#丽江">丽江</a></li> <li><a href="#大理">大理</a></li> <li><a href="#西双版纳">西双版纳</a></li> </ul> <ul class="nav nav-tabs" role="tablist" id="tab-list"> <li class="active"><a href="#元谋" role="tab" data-toggle="tab">元谋</a></li> <li><a href="#丽江" role="tab" data-toggle="tab">丽江</a></li> <li><a href="#大理" role="tab" data-toggle="tab">大理</a></li> <li><a href="#西双版纳" role="tab" data-toggle="tab">西双版纳</a></li> </ul> <script> $(document).read(function(){ $("#bs-example-navbar-collapse-1 .dropdown-menu a").click(functio n(){ var href = $(this).attr("href"); $("#tab-list a[href='"+ herf +"']").tab("show"); }); }); </script>
- bootstrap的日期控件如何改成24小时制
- bootstrap的日期控件如何改成24小时制bootstrap的日期控件如何改成24小时制bootstrap的日期控件如何改成24小时制
- bootstrap中的下拉菜单怎么设计出来，显示效果更佳呢？
- 显示出层级效果，该怎么写代码才能实现需求，点击其中一个可以出现相关信息？
- bootstrap如何设置在文本框后边添加 *
- 使用的是bootstrap ，如何在一组输入框的后边添加 *,便添加备注表明为必填项
- bootstrap中下拉菜单组件 点击没反应 怎么回事？
- ``` <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu "> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </div> <script type="text/javascript" src="js/jquery-3.1.0.js"></script> <script type="text/javascript" src="js/bootstrap.js" /> ``` 这是我写的代码  点击没反应啊
- bootStrap-table 如何冻结最后一列
- bootStrap-table 如何冻结最后一列？网上说了一个引入bootstrap-table-fixed-columns.js文件但是，不能冻结最后一列
- bootstrap 图片布局问题
- bootstrap 怎么在不改变原图片大小的前提下实现居中,两边多出的部分隐藏
- bootstrap做一个可折叠的多行多列的菜单
- 用bootstrap做了后不知道为什么折叠打开的时候只有每行的最后一个能显示出来，前面的一闪就隐藏了
- bootstrap是怎么让二级菜单大屏幕时浮动在上方，小屏幕时不浮动位于在一级菜单父元素下方中
-  bootstrap中有自带样式可以让这二级菜单实现这功能吗，或者这是如何实现的，我看很多用bootstrap写的网站都有这种功能，我自己用二级菜单缩小时总是会浮动遮挡一级菜单求解答
- 怎么用bootstrap框架？
- 怎么把引用bootstrap,将自己做的页面做成响应式。是要用bootstrap里的样式.css文件吗，那自己做的页面的类名是不是得改成bootstrap样式文件里的类名？求大神指教，第一次用bootstrap,不会用。
- Kafka实战(三) - Kafka的自我修养与定位
- Apache Kafka是消息引擎系统，也是一个分布式流处理平台（Distributed Streaming Platform） Kafka是LinkedIn公司内部孵化的项目。LinkedIn最开始有强烈的数据强实时处理方面的需求，其内部的诸多子系统要执行多种类型的数据处理与分析，主要包括业务系统和应用程序性能监控，以及用户行为数据处理等。 遇到的主要问题： 数据正确性不足 数据的收集主要...
- volatile 与 synchronize 详解
- Java支持多个线程同时访问一个对象或者对象的成员变量，由于每个线程可以拥有这个变量的拷贝（虽然对象以及成员变量分配的内存是在共享内存中的，但是每个执行的线程还是可以拥有一份拷贝，这样做的目的是加速程序的执行，这是现代多核处理器的一个显著特性），所以程序在执行过程中，一个线程看到的变量并不一定是最新的。 volatile 关键字volatile可以用来修饰字段（成员变量），就是告知程序任何对该变量...
- Java学习的正确打开方式
- 在博主认为，对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结，前三者博主将淋漓尽致地挥毫于这篇博客文章中，至于总结在于个人，实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍，博客次之，这又是一个层次了，这里暂时不提后面再谈。博主将为各位入门java保驾护航，各位只管冲鸭！！！上天是公平的，只要不辜负时间，时间自然不会辜负你。 何谓学习？博主所理解的学习，它是一个过程，是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
- 程序员必须掌握的核心算法有哪些？
- 由于我之前一直强调数据结构以及算法学习的重要性，所以就有一些读者经常问我，数据结构与算法应该要学习到哪个程度呢？，说实话，这个问题我不知道要怎么回答你，主要取决于你想学习到哪些程度，不过针对这个问题，我稍微总结一下我学过的算法知识点，以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的，并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构，当然，我也会整理一些看过...
- 有哪些让程序员受益终生的建议
- 从业五年多，辗转两个大厂，出过书，创过业，从技术小白成长为基层管理，联合几个业内大牛回答下这个问题，希望能帮到大家，记得帮我点赞哦。 敲黑板！！！读了这篇文章，你将知道如何才能进大厂，如何实现财务自由，如何在工作中游刃有余，这篇文章很长，但绝对是精品，记得帮我点赞哦！！！！ 一腔肺腑之言，能看进去多少，就看你自己了！！！ 目录： 在校生篇： 为什么要尽量进大厂？ 如何选择语言及方...
- 大学四年自学走来，这些私藏的实用工具/学习网站我贡献出来了
- 大学四年，看课本是不可能一直看课本的了，对于学习，特别是自学，善于搜索网上的一些资源来辅助，还是非常有必要的，下面我就把这几年私藏的各种资源，网站贡献出来给你们。主要有：电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意：文中提到的所有资源，文末我都给你整理好了，你们只管拿去，如果觉得不错，转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
- linux系列之常用运维命令整理笔录
- 本博客记录工作中需要的linux运维命令，大学时候开始接触linux，会一些基本操作，可是都没有整理起来，加上是做开发，不做运维，有些命令忘记了，所以现在整理成博客，当然vi，文件操作等就不介绍了，慢慢积累一些其它拓展的命令，博客不定时更新 free -m 其中：m表示兆，也可以用g，注意都要小写 Men：表示物理内存统计 total：表示物理内存总数(total=used+free) use...
- 比特币原理详解
- 一、什么是比特币 比特币是一种电子货币，是一种基于密码学的货币，在2008年11月1日由中本聪发表比特币白皮书，文中提出了一种去中心化的电子记账系统，我们平时的电子现金是银行来记账，因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述，这一层面介绍的文章很多，本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
- GitHub开源史上最大规模中文知识图谱
- 近日，一直致力于知识图谱研究的 OwnThink 平台在 Github 上开源了史上最大规模 1.4 亿中文知识图谱，其中数据是以（实体、属性、值），（实体、关系、实体）混合的形式组织，数据格式采用 csv 格式。 到目前为止，OwnThink 项目开放了对话机器人、知识图谱、语义理解、自然语言处理工具。知识图谱融合了两千五百多万的实体，拥有亿级别的实体属性关系，机器人采用了基于知识图谱的语义感...
- 程序员接私活怎样防止做完了不给钱？
- 首先跟大家说明一点，我们做 IT 类的外包开发，是非标品开发，所以很有可能在开发过程中会有这样那样的需求修改，而这种需求修改很容易造成扯皮，进而影响到费用支付，甚至出现做完了项目收不到钱的情况。 那么，怎么保证自己的薪酬安全呢？ 我们在开工前，一定要做好一些证据方面的准备（也就是“讨薪”的理论依据），这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
- 网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）
- 今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
- 微信支付崩溃了，但是更让马化腾和张小龙崩溃的竟然是……
- loonggg读完需要3分钟速读仅需1分钟事件还得还原到昨天晚上，10 月 29 日晚上 20:09-21:14 之间，微信支付发生故障，全国微信支付交易无法正常进行。然...
- Python十大装B语法
- Python 是一种代表简单思想的语言，其语法相对简单，很容易上手。不过，如果就此小视 Python 语法的精妙和深邃，那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点，并附上详细的实例代码。如能在实战中融会贯通、灵活使用，必将使代码更为精炼、高效，同时也会极大提升代码B格，使之看上去更老练，读起来更优雅。
- 数据库优化 - SQL优化
- 以实际SQL入手，带你一步一步走上SQL优化之路！
- 2019年11月中国大陆编程语言排行榜
- 2019年11月2日，我统计了某招聘网站，获得有效程序员招聘数据9万条。针对招聘信息，提取编程语言关键字，并统计如下： 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
- 通俗易懂地给女朋友讲：线程池的内部原理
- 餐盘在灯光的照耀下格外晶莹洁白，女朋友拿起红酒杯轻轻地抿了一小口，对我说：“经常听你说线程池，到底线程池到底是个什么原理？”
- 《奇巧淫技》系列-python！！每天早上八点自动发送天气预报邮件到QQ邮箱
- 将代码部署服务器，每日早上定时获取到天气数据，并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方，不一定非是天气预报。
- 经典算法（5）杨辉三角
- 杨辉三角 是经典算法，这篇博客对它的算法思想进行了讲解，并有完整的代码实现。
- 英特尔不为人知的 B 面
- 从 PC 时代至今，众人只知在 CPU、GPU、XPU、制程、工艺等战场中，英特尔在与同行硬件芯片制造商们的竞争中杀出重围，且在不断的成长进化中，成为全球知名的半导体公司。殊不知，在「刚硬」的背后，英特尔「柔性」的软件早已经做到了全方位的支持与支撑，并持续发挥独特的生态价值，推动产业合作共赢。 而对于这一不知人知的 B 面，很多人将其称之为英特尔隐形的翅膀，虽低调，但是影响力却不容小觑。 那么，在...
- 腾讯算法面试题：64匹马8个跑道需要多少轮才能选出最快的四匹？
- 昨天，有网友私信我，说去阿里面试，彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static？他被难住了，因为他从来都没有考虑过这个问题。无独有偶，今天笔者又发现有网友吐槽了一道腾讯的面试题，我们一起来看看。 腾讯算法面试题：64匹马8个跑道需要多少轮才能选出最快的四匹？ 在互联网职场论坛，一名程序员发帖求助到。二面腾讯，其中一个算法题：64匹...
- 面试官：你连RESTful都不知道我怎么敢要你？
- 干货，2019 RESTful最贱实践
- 刷了几千道算法题，这些我私藏的刷题网站都在这里了！
- 遥想当年，机缘巧合入了 ACM 的坑，周边巨擘林立，从此过上了"天天被虐似死狗"的生活… 然而我是谁，我可是死狗中的战斗鸡，智力不够那刷题来凑，开始了夜以继日哼哧哼哧刷题的日子，从此"读题与提交齐飞， AC 与 WA 一色 "，我惊喜的发现被题虐既刺激又有快感，那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享，经过激烈的颅内斗争，我决定把我私藏的十几个 T 的，阿不，十几个刷题网...
- 为啥国人偏爱Mybatis，而老外喜欢Hibernate/JPA呢？
- 关于SQL和ORM的争论，永远都不会终止，我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论，感触还是有一些，于是就有了今天这篇文。 声明：本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实，讲道理，所以，请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题，争论已经很多年了。一直也没有结论，毕竟每个人的喜好和习惯是大不相同的。我也看...
- 白话阿里巴巴Java开发手册高级篇
- 不久前，阿里巴巴发布了《阿里巴巴Java开发手册》，总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范，这些流程规范在一定程度上能够保证最终的项目交付质量，通过在时间中总结模式，并推广给广大开发人员，来避免研发人员在实践中容易犯的错误，确保最终在大规模协作的项目中达成既定目标。 无独有偶，笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范，并在实际工作中进行...
- SQL-小白最佳入门sql查询一
- 不要偷偷的查询我的个人资料，即使你再喜欢我，也不要这样，真的不好；
- 项目中的if else太多了，该怎么重构？
- 介绍 最近跟着公司的大佬开发了一款IM系统，类似QQ和微信哈，就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
- Nginx 原理和架构
- Nginx 是一个免费的，开源的，高性能的 HTTP 服务器和反向代理，以及 IMAP / POP3 代理服务器。Nginx 以其高性能，稳定性，丰富的功能，简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求，主要负责调度工作进程：加载配置、启动工作进程及非停升级。worker 进程负责处...
- YouTube排名第一的励志英文演讲《Dream(梦想)》
- Idon’t know what that dream is that you have, I don't care how disappointing it might have been as you've been working toward that dream,but that dream that you’re holding in your mind, that it’s po...
- “狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作
- 一、垃圾文字生成器介绍 最近在浏览GitHub的时候，发现了这样一个骨骼清奇的雷人项目，而且热度还特别高。 项目中文名：狗屁不通文章生成器 项目英文名：BullshitGenerator 根据作者的介绍，他是偶尔需要一些中文文字用于GUI开发时测试文本渲染，因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理，所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的： 你发现，...
- 程序员：我终于知道post和get的区别
- 是一个老生常谈的话题，然而随着不断的学习，对于以前的认识有很多误区，所以还是需要不断地总结的，学而时习之，不亦说乎
