javascript - Bootstrap轮播溢出:Hidden Breaks Dropup Button-6ren

javascript - Bootstrap轮播溢出:Hidden Breaks Dropup Button

转载作者：行者123 更新时间：2023-11-28 09:09:54

25

4

使用 Twitter Bootstrap，.carousel-inner 样式预设为:

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

这样overflow:hidden;会导致右侧的下拉按钮被 chop :

http://imageshack.us/photo/my-images/197/dropup.png/

<div class="btn-group dropup">
  <button class="btn">Cart</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Baker's Dozen (13)</a></li>
    <li><a href="#">Two Dozen (24)</a></li>
    <li><a href="#">Three Dozen (36)</a></li>
    <li><a href="#">Four Dozen (48)</a></li>
    <li><a href="#">Five Dozen (60)</a></li>
  </ul>
</div>

是否有一种 JavaScript 方法可以在 slide 事件之前(而不是on)更改 className ？

在尝试以下代码时，按钮是固定的，但它会导致幻灯片过渡期间每张幻灯片的内容溢出..

<script language="javascript"> $('.carousel.slide').on('slide', function () { // change overflow to hidden, by changing class document.getElementById('carousel-inner').className = 'carousel-inner-fire'; }) $('.carousel.slide').on('slid', function () { // change overflow to visible, by changing class back document.getElementById('carousel-inner-fire').className = 'carousel-inner'; }) </script>
..哪里..

.carousel-inner-fire { position: relative; width: 100%; overflow: hidden; } .carousel-inner { position: relative; width: 100%; overflow: visible; }
也尝试过..

function changeClass() { // change overflow to visible, by changing class document.getElementById("carousel-inner").className = "carousel-inner-visible"; } window.onload = function() { document.getElementById("visible").addEventListener( 'click' , changeClass ); } $.fn['unclick'] = function(){ return this.unbind('click'); }; function changeClassback() { // change overflow to hidden, by changing class back document.getElementById("carousel-inner-visible").className = "carousel-inner"; } window.onload = function() { document.getElementById("visible").addEventListener( 'unclick' , changeClassback ); } .carousel-inner { position: relative; width: 100%; overflow: hidden; } .carousel-inner-visible { position: relative; width: 100%; overflow: visible; } <button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"> <span class="caret"></span> </button>
轮播 HTML:

 <div class="container"> <div class="page-header"> <h1>Header/h1> </div> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> </ol>  <div class="carousel-inner"> <div class="active item">  <div class="row-fluid"> <ul class="thumbnails"> <li class="span4">  <div class="thumbnail"> <a href="#ccCookiesModal" data-toggle="modal"> <img alt="300x200" src="img/chocolate_chip_cookies_thumb.jpeg" style="width: 300px; height: 200px;"></img> </a> <div class="caption"> <h3>Cookies</h3> <p>Chocolate Chip</p> <p> <div class="btn-group dropup"> <button class="btn btn-primary">Buy</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $13</a></li> <li><a href="#">Two Dozen (24) · $24</a></li> <li><a href="#">Three Dozen (36) · $36</a></li> <li><a href="#">Four Dozen (48) · $48</a></li> <li><a href="#">Five Dozen (60) · $60</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $13</a></li> <li><a href="#">Two Dozen (24) · $24</a></li> <li><a href="#">Three Dozen (36) · $36</a></li> <li><a href="#">Four Dozen (48) · $48</a></li> <li><a href="#">Five Dozen (60) · $60</a></li> </ul> </div> </p> </div> </div> </li> <li class="span4">  <div class="thumbnail"> <a href="#BlueberryMuffinsModal" data-toggle="modal"> <img alt="300x200" src="img/blueberry_muffins_thumb.jpeg" style="width: 300px; height: 200px;"></img> </a> <div class="caption"> <h3>Muffins</h3> <p>Blueberry<p> <p> <div class="btn-group dropup"> <button class="btn btn-primary">Buy</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $52</a></li> <li><a href="#">Two Dozen (24) · $96</a></li> <li><a href="#">Three Dozen (36) · $144</a></li> <li><a href="#">Four Dozen (48) · $192</a></li> <li><a href="#">Five Dozen (60) · $240</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $52</a></li> <li><a href="#">Two Dozen (24) · $96</a></li> <li><a href="#">Three Dozen (36) · $144</a></li> <li><a href="#">Four Dozen (48) · $192</a></li> <li><a href="#">Five Dozen (60) · $240</a></li> </ul> </div> </p> </div> </div> </li> <li class="span4">  <div class="thumbnail"> <a href="#ChocolateBrowniesModal" data-toggle="modal"> <img alt="300x200" src="img/brownies_thumb.jpeg" style="width: 300px; height: 200px;"></img> </a> <div class="caption"> <h3>Brownies</h3> <p>Medium Chocolate</p> <p> <div class="btn-group dropup"> <button class="btn btn-primary">Buy</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $39</a></li> <li><a href="#">Two Dozen (24) · $72</a></li> <li><a href="#">Three Dozen (36) · $108</a></li> <li><a href="#">Four Dozen (48) · $144</a></li> <li><a href="#">Five Dozen (60) · $180</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $39</a></li> <li><a href="#">Two Dozen (24) · $72</a></li> <li><a href="#">Three Dozen (36) · $108</a></li> <li><a href="#">Four Dozen (48) · $144</a></li> <li><a href="#">Five Dozen (60) · $180</a></li> </ul> </div> </p> </div> </div> </li> </div> </div> <div class="item">  <div class="row-fluid"> <ul class="thumbnails"> <li class="span4">  <div class="thumbnail"> <a href="#BananaBreadModal" data-toggle="modal"> <img alt="300x200" src="img/banana_bread_thumb.jpeg" style="width: 300px; height: 200px;"></img> </a> <div class="caption"> <h3>Banana Bread</h3> <p>With Chocolate Chips</p> <p> <div class="btn-group dropup"> <button class="btn btn-primary">Buy</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One Loaf (1) · $20</a></li> <li><a href="#">Two Loaves (2) · $40</a></li> <li><a href="#">Three Loaves (3) · $60</a></li> <li><a href="#">Four Loaves (4) · $80</a></li> <li><a href="#">Five Loaves (5) · $100</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">One Loaf (1) · $20</a></li> <li><a href="#">Two Loaves (2) · $40</a></li> <li><a href="#">Three Loaves (3) · $60</a></li> <li><a href="#">Four Loaves (4) · $80</a></li> <li><a href="#">Five Loaves (5) · $80</a></li> </ul> </div> </p> </div> </div> </li> <li class="span4">  <div class="thumbnail"> <a href="#RiceCrispiesModal" data-toggle="modal"> <img alt="300x200" src="img/rice_crispies_thumb.jpeg" style="width: 300px; height: 200px;"></img> </a> <div class="caption"> <h3>Rice Crispies</h3> <p>Marshmallow<p> <p> <div class="btn-group dropup"> <button class="btn btn-primary">Buy</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $26</a></li> <li><a href="#">Two Dozen (24) · $48</a></li> <li><a href="#">Three Dozen (36) · $72</a></li> <li><a href="#">Four Dozen (48) · $96</a></li> <li><a href="#">Five Dozen (60) · $120</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $26</a></li> <li><a href="#">Two Dozen (24) · $48</a></li> <li><a href="#">Three Dozen (36) · $72</a></li> <li><a href="#">Four Dozen (48) · $96</a></li> <li><a href="#">Five Dozen (60) · $120</a></li> </ul> </div> </p> </div> </div> </li> <li class="span4">  <div class="thumbnail"> <a href="#OatmealRaisinCookiesModal" data-toggle="modal"> <img alt="300x200" src="img/oatmeal_raisin_cookies_thumb.jpeg" style="width: 300px; height: 200px;"></img> </a> <div class="caption"> <h3>Oatmeal Cookies</h3> <p>With Raisins</p> <p> <div class="btn-group dropup"> <button class="btn btn-primary">Buy</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $13</a></li> <li><a href="#">Two Dozen (24) · $24</a></li> <li><a href="#">Three Dozen (36) · $36</a></li> <li><a href="#">Four Dozen (48) · $48</a></li> <li><a href="#">Five Dozen (60) · $60</a></li> </ul> </div> <div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Baker's Dozen (13) · $13</a></li> <li><a href="#">Two Dozen (24) · $24</a></li> <li><a href="#">Three Dozen (36) · $36</a></li> <li><a href="#">Four Dozen (48) · $48</a></li> <li><a href="#">Five Dozen (60) · $60</a></li> </ul> </div> </p> </div> </div> </li> </div> </div> </div> </div>
任何在修复按钮的同时保持正确的幻灯片动画的解决方案将不胜感激。
谢谢
祝一切顺利

最佳答案

您可以将“pull-right”类添加到被 chop 的“下拉”菜单中，以便它们与下拉菜单的右侧对齐，而不是使用复杂的 jQuery 解决方案向上按钮。

例如，这里是“布朗尼”下拉菜单:

<div class="btn-group dropup"> <button class="btn">Cart</button> <button class="btn dropdown-toggle" data-toggle="dropdown" id="visible"> <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Baker's Dozen (13) · $39</a></li> <li><a href="#">Two Dozen (24) · $72</a></li> <li><a href="#">Three Dozen (36) · $108</a></li> <li><a href="#">Four Dozen (48) · $144</a></li> <li><a href="#">Five Dozen (60) · $180</a></li> </ul> </div>

Working Demo on Bootply

关于javascript - Bootstrap轮播溢出:Hidden Breaks Dropup Button，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16452041/

25

4

0

文章推荐： android - 网页适合所有安卓设备

文章推荐： jQuery UI - addClass/removeClass : Unwanted white background 问题

文章推荐： css - 如何在 HTML 元素中使用 CSS 设置特定单词的样式？

文章推荐： javascript - 通过ID更改标签背景颜色

javascript - Bootstrap Dropup-Dropdown 词缀将导航栏 'dropup' 转换为 'dropdown' 当词缀在顶部使用 JS
我想制作一个带“下拉”菜单的导航栏，并带有词缀属性。但是当'.affix'被触发时，'dropup'菜单将变成'dropdown'。我的 JS 代码无法正常工作，无法为此获得任何解决方案。我的代码在下
javascript - 制作下拉菜单 'DropUp'
我正在尝试实现一个下拉菜单。作为起点，我使用基于 CSS 技巧的简单 jQuery 下拉菜单的 HTML/CSS/jQuery 构建的现有下拉菜单。 (因为我无法在触摸设备上使用纯 css，因为它们依
jquery - Select2 打开下拉向上 -dropup
无论下方是否有足够的空间，我都希望每次都向上显示下拉列表。如何实现？这样做的关键点是什么？更新下面是我如何初始化 Select2: $("select[name=ingredients]").s
javascript - Dropup Bootstrap 类始终保持事件和显示状态
dropdown-item class仅在使用dropdown class时才能正常工作，但在dropup class中不起作用。单击所有子菜单项后，下拉菜单不起作用。因为每次点击后，所有下拉项都会
html - Bootstrap Dropup 不工作
我的 footer 中的 dropup 不工作。当我将 dropup 更改为 dropdown 时，它开始作为 dropdown 工作，但我需要一个 dropup。我遵循了 bootstrap 的指导
css - 将 DropUp 菜单从悬停更改为单击
我的移动页脚上有一个下拉按钮，但下拉按钮仅在悬停时打开。如何更改下拉菜单仅在单击时可见的代码？ More
javascript - Bootstrap dropup div 从输入源分离
我正在尝试使用具有简单自动完成功能的 Bootstrap 下拉菜单。下拉菜单不会出现此问题，只会出现下拉菜单。我在这里的 JSFiddle 中复制了这个问题:https://jsfiddle.net
html - 如何将 Bootstrap 下拉子菜单获取到 'dropup'
我有一个 Bootstrap 下拉菜单。最后一个 li 项是一个子菜单。如何在整个菜单下拉时让子菜单下拉？这是代码: FILTER Tex
angularjs - angular ui bootstrap dropup 不起作用
我需要使用下拉菜单。此代码与 ui-bootstrap-tpls-0.10.0.js 完美配合: {{text}} Toggle Dropdow
javascript - Bootstrap轮播溢出:Hidden Breaks Dropup Button
使用 Twitter Bootstrap，.carousel-inner 样式预设为: .carousel-inner { position: relative; width: 100%;
android - Spinner dropUP 而不是 dropDOWN android
我有一个从 ArrayAdapter 扩展的适配器，以便用一个对象集合(城市)填充一个 Spinner。所有对象和适配器都可以正常工作，至少看起来是这样。问题是当我显示所有城市集合时，它显示为向上而不
javascript - 寻找 Angular.js 的 dropup 指令
我想在 Angular.js 中实现一个下拉菜单(在按钮上方打开的菜单)，其行为类似于 Boostrap 中的“.dropup”类。是否有执行此操作的指令或创建指令的简单指令？最佳答案如果您使用
html - 带导轨的 Bootstrap : Align a dropup with other element in a footer
我试图将以下内容作为页脚对齐，但下拉菜单与其余内容不对齐:
html - Dropup Bootstrap (v3.3.7) 固定在底部时切换菜单
我有一个固定在底部的菜单，并希望切换为下拉而不是向下。我已经尝试了在 stackoverflow 中找到的所有解决方案(比如这个 How to get a Bootstrap dropdown sub
javascript - 用 Dropup 替换 Bootstrap Dropdown(两个几乎相同的实现的不同事件)
我正在 github pages 上做一个元素，如果 div 的 overflow-y: scroll，我用 .dropup 替换 Bootstrap .dropdown 将导致下拉菜单被 chop/
twitter-bootstrap - 使用 Bootstrap Select 禁用 dropup 特性
我正在使用 Bootstrap Select 为 Accordion 内的一些选择字段设置样式。 Bootstrap select 有一个功能，如果它靠近屏幕底部，它将使您的下拉菜单成为下拉菜单。在
html - Bootstrap 4 Fixed Bottom Nav with dropup。如何？
在发布之前，我已经研究了该解决方案的站点。似乎没有一种方法适用于这种方法。我在中创建了以下模板Pingendo. .dropup .dropdown-menu { top: auto; bo
javascript - 如何在 Bootstrap 2.3.2 中弹出 dropup 之前调用函数？
下面是我的 html: Hi! LI 1 根据文档，我尝试过: $("div.dropup").on("show", fun
css - 纯 CSS dropup-menu : I have the basics functioning, 但如何让二级 li 元素显示为内联而不是相互叠加？
我正在使用这个:http://jsfiddle.net/fJSVz/作为我的基本菜单，它非常适合底部固定菜单。也就是说，我需要显示当您将鼠标悬停在要显示在上方、居中和内联(在一行上)的菜单上时出现的二

首页

博学

6Ren·AI

商城

javascript - Bootstrap轮播溢出:Hidden Breaks Dropup Button