单击时更改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

这是一个可能有用的策略:监听click事件.panel-title,并将父类更改md-col-3为单击它时,还将此父级的所有兄弟类的类还原为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');
});

请注意,如果父项的所有兄弟姐妹都是相同的,您可以在没有.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');
});

这是一个概念验证小提琴: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');
});

请看这里的小提琴:http://jsfiddle.net/teddyrised/zwpCF/1/