javascript - Bootstrap 中的动态按钮组

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

这仅在您不希望相邻按钮具有圆 Angular 时才有效。使用相同的语法很容易为下一个按钮执行此操作，但不能为上一个按钮执行此操作。