jquery - 如何在悬停时在 bootstrap 中扩展 div col

Question

我正在使用 Bootstrap 构建页面。我有一个部分，其中有 6 个不同的部分(连续 3 个)。

<div class="row">
  <div class="col-md-4">
     <div style="background:#ababab">Lorium ispum</div>
  </div>
  <div class="col-md-4">
     <div style="background:#ababab">Lorium ispum</div>
  </div>
  <div class="col-md-4">
     <div style="background:#ababab">Lorium ispum</div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
     <div style="background:#ababab">Lorium ispum</div>
  </div>
  <div class="col-md-4">
     <div style="background:#ababab">Lorium ispum</div>
  </div>
  <div class="col-md-4">
     <div style="background:#ababab">Lorium ispum</div>
  </div>
</div>

我试图在鼠标悬停时将 col 扩展到容器的整个宽度。同时，其他 col 部分将消失。

我尝试通过 jQuery 调整鼠标悬停时隐藏所有 5 个列。但是不知道如何扩展容器。有人可以帮我解决这个问题吗？如果您需要任何帮助，请告诉我。

Answer 1

您可以使用 jQuery 的悬停方法:

$('.col-md-4').hover(function () {
    var $this = $(this);
    $this.removeClass('col-md-4').addClass('col-md-12');
    $this.siblings('.col-md-4').hide();
}, function () {
    var $this = $(this);
    $this.removeClass('col-md-12').addClass('col-md-4');
    $this.siblings('.col-md-4').show();
});

这是一个有效的 jsFiddle:http://jsfiddle.net/k958H/