我希望能够点击其中一个<div class="col-md-4'>并顺利地将其转换为<div class="col-md-12">，同时顺利摆脱剩余的md-4＆＃39}。当我再次点击md-12时，我希望它顺利地做相反的事情......但不能解决正在发生的事情。
当我点击col-md-4时，它会做我想要的，减去平滑度，但不会恢复原状。如果我默认使用col-md-12并删除col-md-4代码，则col-md-12将恢复为4 ..但是4到12到4没有运气。
为什么会这样？
$(document).ready(function(){
$('.col-md-4').click(function(){
$(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
$('.col-md-4').addClass('profiles-gone');
});
$('.col-md-12').click(function(){
$(this).removeClass('col-md-12');
$('.col-md-4').removeClass('profiles-gone');
$(this).addClass('col-md-4');
});
});.col-md-12 { background-color: #A9F5BC }<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="profile">
<!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
<h2>Veronica A</h2>
<img src="http://placehold.it/250x250">
<h3>Head of XYZ at XYZ</h3>
<p class="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
<p class="about-long">lelelelele</p>
</div>
</div>
<div class="col-md-4">
<div class="profile">
<!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
<h2>Veronica B</h2>
<img src="http://placehold.it/250x250">
<h3>Head of XYZ at XYZ</h3>
<p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
<p class="about-long">lelelelelele</p>
</div>
</div>
<div class="col-md-4">
<div class="profile">
<!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
<h2>Veronica C</h2>
<img src="http://placehold.it/250x250">
<h3>Head of XYZ at XYZ</h3>
<p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p>
<p class="about-long">lelelelele</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：3)
这是因为执行代码时不存在.col-md-12。您需要使用on：
$(document).ready(function() {
$(document).on('click', '.col-md-4', function() {
$(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
$('.col-md-4').addClass('profiles-gone');
}).on('click', '.col-md-12', function() {
$(this).removeClass('col-md-12');
$('.col-md-4').removeClass('profiles-gone');
$(this).addClass('col-md-4');
});
});
下面的工作示例代码段：
$(document).ready(function() {
// this will be parent container for events,
$(document) // it's usually best practice to use a "static parent" with ID,
// but in this case, you appear to have none,
// so we'll just use DOM (document)
// here's our first click event, assigned to work on element's having class "col-md-4"
.on('click', '.col-md-4', function() {
$(this).switchClass("col-md-4", "col-md-12", 1000).removeClass('col-md-4');
$('.col-md-4').addClass('profiles-gone');
})
// here's our 2nd click event, assigned to work on element's having class "col-md-12"
.on('click', '.col-md-12', function() {
$(this).removeClass('col-md-12');
$('.col-md-4').removeClass('profiles-gone');
$(this).addClass('col-md-4');
});
});.col-md-12 { background-color: #A9F5BC }<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="profile">
<!--<a href="#" class="expand-button"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
<h2>Veronica A</h2>
<img src="http://placehold.it/250x250">
<h3>Head of XYZ at XYZ</h3>
<p class="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
<p class="about-long">lelelelele</p>
</div>
</div>
<div class="col-md-4">
<div class="profile">
<!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
<h2>Veronica B</h2>
<img src="http://placehold.it/250x250">
<h3>Head of XYZ at XYZ</h3>
<p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more.</a></p>
<p class="about-long">lelelelelele</p>
</div>
</div>
<div class="col-md-4">
<div class="profile">
<!--<a href="#"><i class="fa fa-expand fa-2x" id="bigger"></i></a>-->
<h2>Veronica C</h2>
<img src="http://placehold.it/250x250">
<h3>Head of XYZ at XYZ</h3>
<p style="about-short">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation... <a href="#" id="bigger">read more</a></p>
<p class="about-long">lelelelele</p>
</div>
</div>
</div>
</div>