javascript - Bootstrap Carousel Overflow:Hidden Breaks Dropup Button

Question

使用 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>

是否有一种javascript方法可以在事件之前（而不是）更改className ？onslide

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

<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) &middot; $13</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $24</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $36</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $48</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $13</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $24</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $36</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $48</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $52</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $96</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $144</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $192</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $52</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $96</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $144</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $192</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $39</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $72</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $108</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $144</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $39</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $72</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $108</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $144</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $20</a></li>
                          <li><a href="#">Two Loaves (2) &middot; $40</a></li>
                          <li><a href="#">Three Loaves (3) &middot; $60</a></li>
                          <li><a href="#">Four Loaves (4) &middot; $80</a></li>
                          <li><a href="#">Five Loaves (5) &middot; $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) &middot; $20</a></li>
                          <li><a href="#">Two Loaves (2) &middot; $40</a></li>
                          <li><a href="#">Three Loaves (3) &middot; $60</a></li>
                          <li><a href="#">Four Loaves (4) &middot; $80</a></li>
                          <li><a href="#">Five Loaves (5) &middot; $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) &middot; $26</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $48</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $72</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $96</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $26</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $48</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $72</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $96</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $13</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $24</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $36</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $48</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $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) &middot; $13</a></li>
                          <li><a href="#">Two Dozen (24) &middot; $24</a></li>
                          <li><a href="#">Three Dozen (36) &middot; $36</a></li>
                          <li><a href="#">Four Dozen (48) &middot; $48</a></li>
                          <li><a href="#">Five Dozen (60) &middot; $60</a></li>
                        </ul>
                      </div>
                    </p>
                  </div>
                </div>
              </li>   
          </div>
        </div>
      </div>
    </div>

在修复按钮的同时保持正确的幻灯片动画的任何解决方案将不胜感激..

谢谢

一切顺利

Answer 1

代替复杂的 jQuery 解决方案，您可以将“ pull-right ”类添加到被截断的“下拉”菜单中，以便它们与下拉按钮的右侧对齐。

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

<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>

Bootply 上的工作演示