bootstrap 下拉菜单自动向上向下弹起
.别人的解决方案

2.别人的解决方案

3.我哒
div class="btn-group" style="margin-top:500px;" >
<button type="button" class="btn btn-default">Drop</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>1</li><li>2</li> <li>1</li><li>2</li> <li>1</li><li>2</li> <li>1</li><li>2</li>
</ul>
</div>
<style>
.dropup .dropdown-menu{
position: absolute;
top:auto;
bottom:100%;
}
.dropdown .dropdown-menu{
position: absolute;
top:100%;
bottom:auto;
}
</style>
<script>
$(function(){
$(".dropdown-toggle").click(function(){
var myheight=$(".dropdown-menu").height()+$(".btn-group").offset().top;
alert(myheight);
alert($(window).height())
if($(window).height()<myheight){
$('.btn-group').addClass('dropup')
}else{
$('.btn-group').addClass('dropdown')
}
})
})
</script>
bootstrap 下拉菜单自动向上向下弹起的更多相关文章
- 【easyui-combobox】下拉菜单自动补全功能,Ajax获取远程数据源
这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class= ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- 简易自定义下拉菜单 与简易默认下拉html片段
简易自定义下拉选择 html片段 html: <div class="select_box province"> <div class="selecte ...
- bootstrap——下拉菜单右对齐
通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap按钮式下拉菜单
前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...
- Bootstrap 字体图标、下拉菜单、按钮组
Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...
- 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
随机推荐
- Django项目中自定义manage命令
挺不错的一篇文章:https://www.cnblogs.com/ajianbeyourself/p/3643304.html
- linux下ls -l命令(即ll命令)查看文件的显示结果分析
在linux下使用“ls -l”或者“ls -al”或者“ll”命令查看文件及目录详情时,shell中会显示出好几列的信息.平时也没怎么注意过,今天忽然心血来潮想了解一下,于是整理了这篇博客,以供参考 ...
- C语言 · 勾股数
勾股数 勾股定理,西方称为毕达哥拉斯定理,它所对应的三角形现在称为:直角三角形. 已知直角三角形的斜边是某个整数,并且要求另外两条边也必须是整数. 求满足这个条件的不同直角三角形的个数. [数据格式] ...
- jenkins GitHub 自动触发
jenkins GitHub 自动触发 转载请注明出处: 转载自Bin's Blog: jenkins GitHub 自动触发( http://www.wenbin.cf/post/54/ ) 需要 ...
- linux下access函数
Linux内核总是根据进程的有效用户ID和有效组ID来决定一个进程是否有权访问某个文件. 因此,在编写调整用户ID的程序时,在读写一个文件之前必须明确检查其用户是否原本就有对此文件的访问权限. 为了实 ...
- Parquet格式解析
parquet是列式存储格式,官方文档 https://parquet.apache.org/documentation/latest/ 一个Parquet文件是由一个header以及一个或多个blo ...
- 复制id_rsa命令
pbcopy < ~/.ssh/id_rsa.pub https://aliasan-conf.taijiankong.cn/duotai/2T7b253i8.pac
- Java 8 时间日期
啦啦啦 package lime.java1_8.time; import java.time.*; import java.time.format.DateTimeFormatter; import ...
- RTX临界段,中断锁与任务锁
临界段 代码的临界段也称为临界区,一旦这部分代码开始执行,则不允许任何中断打断.为确保临界段代码的执行不被中断,在进入临界段之前须关中断,而临界段代码执行完毕后,要立即开中断. ...
- Visual Studio 2010 VS IDE 编辑界面出现绿色的点 去掉绿色的空格点
Visual Studio 2010 VS IDE 编辑界面出现绿色的点 去掉绿色的空格点 Vs乱按一顿忽然出现一堆绿色的点,我去好难看,还不知道什么鬼,查了查其实就是个 每个点表示一个空格 让他显 ...