javascript - 如何使用 Bootstrap 为点击的元素创建具有滚动和溢出功能的 Facebook 固定侧边栏?

标签 javascript jquery css twitter-bootstrap

我遇到了一个问题。我正在创建一个简单的固定侧边栏(类似于右侧 Facebook 的侧边栏)

在 Facebook 中,当您与侧边栏交互时,会发生 2 件事

  1. 当内容需要滚动时出现滚动条
  2. 当您将鼠标悬停或单击某个名称时,左侧会出现一个弹出窗口

我遇到了弹出窗口与溢出冲突的问题。据我了解,要让侧边栏滚动,必须将溢出设置为在父 div 上滚动,这会隐藏出现在其外部的任何元素。

我正在使用 Twitter Bootstrap 构建我的侧边栏,并在此处创建了一个工作示例的 JSFiddle

http://jsfiddle.net/bNFAf/5/

我的示例的问题是,当我单击图标 <i class="icon-cog icon-white"></i> 时激活dropdown-menu ,由于 #sidebar 上设置的溢出而被切断分区。

有人对如何让它发挥作用有任何建议吗?如果可以不用 jQuery 而只使用 CSS,那就太好了!否则,jQuery 可以工作。

演示 - http://jsfiddle.net/bNFAf/5/

最佳答案

Fiddle

这使用 Bootstrap 弹出窗口,它允许向左定位,以便选项飞出菜单。

$(document).ready(function(){

$('.icon-cog').popover({
    placement: 'left',
    html: 'true',
    trigger: 'click',
    container: 'body'    
});

});

您可以使用JQuery Drill Down Ipod Menu

关于javascript - 如何使用 Bootstrap 为点击的元素创建具有滚动和溢出功能的 Facebook 固定侧边栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15406372/

相关文章:

javascript - react native : running JS code from Java Module in background with AlarmManager

javascript - Grails-如何验证 gsp 中参数的值?

javascript - jQuery 在每个选定对象上触发函数

javascript - 仅当从外部源访问站点时加载特定内容

css - 是否可以让本地类继承从文件导入的所有类?

javascript - 如何在客户端 javascript 中使用 node.js 缓冲区库

php - 在 ajax 请求中使用带有 jQ​​uery 的 dataType 脚本获取响应

jquery - 在多个实例中应用 Jquery

CSS 不会让我的内联样式覆盖选择框上的类

html - 当鼠标移动到子元素时,如何保持应用 CSS 悬停规则?