单击时更改 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，并将此父类的所有兄弟姐妹的类恢复为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()。

查看上述代码的更简单方法，无需 cmets。当在 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/

Answer 2

你可以试试下面的代码

$('.target1').click(function(){
   $(".col-md-3").addClass("col-md-2");
   $(".col-md-3").removeClass("col-md-3");
});
$('.target2').click(function(){
   $(".col-md-2").addClass("col-md-3");
   $(".col-md-2").removeClass("col-md-2");
});