Question

我想知道是否有办法使按钮组动态化，示例：http://www.bootply.com/lkJQ2WDubH 结果你可以看到第一行和第二行。

我如何创建或使其动态化，以便当我点击按钮时它调整位置并获得活动状态？

当按钮1处于活动状态时：

当按钮2处于活动状态时：

依旧......

因此，一个按钮组或工具栏就像这两个组一样，现在它是重复的代码。

想法是主动按钮脱颖而出，但现在它是重复的代码，也许有更多的动态解决方案，欣赏指导或帮助。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary active">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
</div>
<br>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="First groups">
     <button type="button" class="btn btn-primary active">2</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">

    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
</div>

谢谢。

Answer 1

做这样的事情：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group" role="group" aria-label="First group">
      <button type="button" class="btn btn-primary new">1</button>
      <button type="button" class="btn btn-primary new">2</button>
      <button type="button" class="btn btn-primary new">3</button>
      <button type="button" class="btn btn-primary new">4</button>
      <button type="button" class="btn btn-primary new">5</button>
      <button type="button" class="btn btn-primary new">6</button>
      <button type="button" class="btn btn-primary new">7</button>
  </div>
</div>

然后，通过一点点jquery，您可以向单击的按钮添加一个类，并将其从其他按钮中删除，以实现您在单击按钮上所需的任何样式：

  $("button.new").click(function() {
      $("button.new").removeClass("buttonChange").removeClass("buttonRoundLeft").removeClass("buttonRoundRight");
     $(this).addClass("buttonChange");
     $(this).prev().addClass("buttonRoundLeft");
     $(this).next().addClass("buttonRoundRight");
 });

所需的CSS类如下所示：

.buttonChange  {
    margin: 0 10px !important;
    border-radius: 5px !important;
 }

 .buttonRoundLeft {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
 }
 .buttonRoundRight {
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
 }

查看CODEPEN

上的工作示例

更新：

更简单的方法是只为按钮的焦点状态设置一个类，如下所示：

button.new:focus {
   margin: 0 10px !important;
   border-radius: 5px !important;
}

这仅适用于您不希望相邻按钮具有圆角的情况。使用相同的语法对下一个按钮很容易，但前一个按钮不可能。

Answer 2

＆＃13;

$("li.btn").click(function() {
   $("li.btn").removeClass("buttonSelect");
   $(this).addClass("buttonSelect");
});

＆＃13;

.buttonSelect  {
  margin: 0 10px !important;
}

li.btn:focus {
   margin: 0 10px !important;
   border-radius: 0 !important;
}

＆＃13;

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <ul class="btn-group" role="group" aria-label="First group">
    <li type="button" class="btn btn-primary">1</li>
    <li type="button" class="btn btn-primary">2</li>
    <li type="button" class="btn btn-primary">3</li>
    <li type="button" class="btn btn-primary">4</li>
    <li type="button" class="btn btn-primary">5</li>
    <li type="button" class="btn btn-primary">6</li>
    <li type="button" class="btn btn-primary">7</li>
  </ul>
</div>

＆＃13;

Check this

Bootstrap中的动态按钮组

2 个答案: