javascript - 单击时更改 Bootstrap 列类，单击其他元素时将其更改回

Question

这对我来说似乎很棘手。单击 div 中的类“panel-titel”时，我想将引导列类从“col-md-2”更改为“col-md-3”。当用户单击另一个“面板标题”时，我希望将包含“col-md-2”的那个更改为“col-md-3”，并恢复另一个 div 的第一类更改。这可能吗？谢谢。

<div class="col-md-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
          15.3.2014
        </a>
      </h4>
    </div>
    <div id="timeline1" class="panel-collapse collapse">
      <div class="panel-body">
        <a href="#" class="thumbnail">
          <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11">
        </a>
      </div>
    </div>
  </div>
</div>

Answer 1

这里有一个策略可能会有所帮助:监听.panel-title 上的点击事件，并在点击时将父类更改为md-col-3 on，并将此父级的所有 sibling 的类还原为 md-col-2。这是代码:

$('.panel-title').click(function() {
    $(this)
        // Find parent with the class that starts with "col-md"
        // Change class to "col-md-3"
        .closest('[class^="col-md"]')
            .removeClass('col-md-2')
            .addClass('col-md-3')

        // Find siblings of parent with similar class criteria
        // - if all siblings are the same, you can use ".siblings()"
        // Change class to "col-md-2"
        .siblings('[class^="col-md"]')
            .removeClass('col-md-3')
            .addClass('col-md-2');
});

请注意，如果 parent 的所有 sibling 都相同，则可以不使用 .siblings('[class^="col-md"]') 选择器，并使用 .siblings() 代替。

更简单的方式查看上面的代码，没有注释。当在 jQuery 中链接以跟踪当前正在操作的对象时，缩进很有用:

$('.panel-title').click(function() {
    $(this)
        .closest('[class^="col-md"]')
            .removeClass('col-md-2').addClass('col-md-3')
            .siblings('[class^="col-md"]')
                .removeClass('col-md-3').addClass('col-md-2');
});

这是一个概念验证 fiddle :http://jsfiddle.net/teddyrised/zwpCF/

---

[更新] 更好的是:如果你想节省几个字节，你可以使用 .toggleClass() 代替:

$('.panel-title').click(function() {
    $(this)
        .closest('[class^="col-md"]')
            .toggleClass('col-md-2 col-md-3')
            .siblings('[class^="col-md"]')
                .removeClass('col-md-3')
                .addClass('col-md-2');
});

在这里查看 fiddle :http://jsfiddle.net/teddyrised/zwpCF/1/