.别人的解决方案

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 下拉菜单自动向上向下弹起的更多相关文章

  1. 【easyui-combobox】下拉菜单自动补全功能,Ajax获取远程数据源

    这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class= ...

  2. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  3. 简易自定义下拉菜单 与简易默认下拉html片段

    简易自定义下拉选择 html片段 html: <div class="select_box province"> <div class="selecte ...

  4. bootstrap——下拉菜单右对齐

    通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap按钮式下拉菜单

    前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...

  7. Bootstrap 字体图标、下拉菜单、按钮组

    Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法 ...

  8. 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)

    组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...

  9. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

随机推荐

  1. 【Spark深入学习 -13】Spark计算引擎剖析

    ----本节内容------- 1.遗留问题解答 2.Spark核心概念 2.1 RDD及RDD操作 2.2 Transformation和Action 2.3 Spark程序架构 2.4 Spark ...

  2. V-Charts中使用extend属性定制词云图

    [本文出自天外归云的博客园] 简介 在Vue中使用E-Charts可以用V-Charts,词云图在V-Charts官网中介绍比较简单,如果想更多定制的话,官网上说要在extend属性中进行扩展. V- ...

  3. 进一步聊聊weight initialization

    深度学习模型训练的过程本质是对weight(即参数W)进行更新,这需要每个参数有相应的初始值. 有人可能会说:"参数初始化有什么难点?直接将所有weight初始化为0或者初始化为随机数!&q ...

  4. spring源码:学习线索

    一.spring xml配置(不包括AOP,主要了解在初始化及实例化过程中spring配置文件中每项内容的具体实现过程,从根本上掌握spring) <bean>的名字 &,alia ...

  5. ZOJ 3886 Nico Number(筛素数+Love(线)Live(段)树)

    problemCode=3886">ZOJ 3886 题意: 定义一种NicoNico数x,x有下面特征: 全部不大于x且与x互质的数成等差数列,如x = 5 ,与5互素且不大于5的数 ...

  6. ubuntu源码安装jdk8

    最近学习java,想起来没有在Ubuntu上使用过 因此想安装下环境,并在Ubuntu上试用MPXJ读取mpp文件 1.安装 下载jdk8 https://www.oracle.com/technet ...

  7. u3d内嵌H5游戏 设置cookie

    Intent intent1 = getIntent(); Log.d("SS", "onCreate: "); String data = intent1.g ...

  8. python数据分析及展示(二)

    一.Matplotlib库入门 1. Matplotlib库的介绍 http://matplotlib.org/gallery.html可查看Matplotlib库的效果 Matplotlib库由各种 ...

  9. docker学习(一)

    在工作和生活中免不了要学习新的东西.学习新东西要和已有的东西相结合,要有较快的效率.今天学习一下docker的使用,也锻炼一下自己学习新东西的能力. 1.学习docker,首先要下载docker.首先 ...

  10. highcharts.js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...