【发布时间】：2013-05-03 08:30:17
【问题描述】：
使用 Twitter Bootstrap，.carousel-inner 样式预设为：
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
这样overflow: hidden; 会导致右侧的下拉按钮被切断：
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>
在slide 事件之前更改类名（而不是on）是否有javascript 方式？
在尝试下面的代码中，按钮是固定的，但是在幻灯片过渡的过程中导致每张幻灯片的内容溢出..
<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：
<!-- Begin page content -->
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"> <!-- Item 1-3 -->
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4"> <!-- Item 1 -->
<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"> <!-- Item 2 -->
<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"> <!-- Item 3 -->
<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"> <!-- Items 4-6 -->
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4"> <!-- Item 4 -->
<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"> <!-- Item 5 -->
<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"> <!-- Item 6 -->
<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>
在修复按钮的同时保持正确的幻灯片动画的任何解决方案将不胜感激..
谢谢
一切顺利
【问题讨论】：
-
你也可以发布轮播HTML代码吗？
-
刚刚添加..感谢您的关注..github是分享大代码sn-ps的最佳方式吗？
-
我会使用 bootply.com 然后您可以分享链接并仅发布您的部分代码。
-
SO 是一个问答论坛。我认为您不想提供 PayPal 优惠。您是否尝试按照我的回答建议使用“向右拉”？
-
是的，刚刚做了..错误地添加到左侧按钮，然后添加到右侧..完美。非常感谢，再次。
标签： javascript twitter-bootstrap overflow carousel getelementsbyclassname