javascript 单击时更改 Bootstrap 列类，单击其他元素时将其改回
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25057945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Bootstrap column class on click, change it back when other element is clicked
提问by user3895382
This seems quite tricky to me. I want to change a bootstrap column class from "col-md-2" to "col-md-3" when class "panel-titel" within the div is clicked. When the user clicks on another "panel-titel" I want that one's containing "col-md-2" to change to "col-md-3" and the first class change of the other div to be reverted. Is this even possible? Thanks.
这对我来说似乎很棘手。当单击 div 中的“面板标题”类时，我想将引导列类从“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>
回答by Terry
Here's a strategy that might help: listen to the click event on .panel-title, and change the parent class to md-col-3when it is clicked on, and also revert the classes of all siblings of this parent to md-col-2. Here's the code:
这是一个可能有帮助的策略：监听 on 上的 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');
});
Note that if all the siblings of the parents are the same, you can make do without the .siblings('[class^="col-md"]')selector, and use .siblings()instead.
请注意，如果父母的所有兄弟姐妹都相同，则可以不使用.siblings('[class^="col-md"]')选择器，.siblings()而是使用选择器。
A more simple way to view the code above, without comments. The indentations are useful when chaining in jQuery to keep track of the objects that are currently being manipulated:
一种更简单的方式来查看上面的代码，没有注释。在 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');
});
Here is a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/zwpCF/
这是一个概念验证小提琴：http: //jsfiddle.net/teddyrised/zwpCF/
[Update]Even better: if you want to save a few bytes, you can use .toggleClass()instead:
[更新]更好：如果你想节省几个字节，你可以使用.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');
});
See fiddle here: http://jsfiddle.net/teddyrised/zwpCF/1/
请参阅此处的小提琴：http: //jsfiddle.net/teddyrised/zwpCF/1/
回答by Mayur Chauhan
You can try below code
你可以试试下面的代码
$('.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");
});
