removeClass if nothing is slideDown
I have this jQuery:
$('.infoExpand p').hide();
$('.infoData').click(function(){
$('.infoData').removeClass('infoDataHov');
$(this).addClass('infoDataHov');
var id = this.id;
id = id.replace("tab", "info");
var clicked = $('.infoExpand #' + id);
if (clicked.is(':visible')){
clicked.slideToggle();
}else{
$('.infoExpand p:visible').slideToggle();
clicked.slideToggle();
}
});
Along with this markup:
<div class="infographic">
<p>What am I made of...</p>
<span id="tabPhp" class="infoData">PHP</span>
<span id="tabJquery" class="infoData">jQuery</span>
<span id="tabWordpress" class="infoData">WordPress</span&g开发者_如何学编程t;
<span id="tabCss3" class="infoData">CSS3</span>
<span id="tabMysql" class="infoData">MySQL</span>
<div class="infoExpand">
<p id="infoPhp">PHP</p>
<p id="infoJquery">jQuery</p>
<p id="infoWordpress">Wordpress</p>
<p id="infoCss3">CSS3</p>
<p id="infoMysql">MySQL</p>
</div>
</div>
the problem i have is when the user hits the same tab that is already selected (sliding up the P element) the tab is still has the 'infoDataHov' class applied to it?
how can i removeClass from all .infoData if nothing is slideDown?
You already ave the line $('.infoData').removeClass('infoDataHov');
earlier in your code. It does what you want :)You know which element you want to remove the class from in this case though so you can just use $(this).removeClass('infoDataHov');
:
$('.infoExpand p').hide();
$('.infoData').click(function(){
$('.infoData').removeClass('infoDataHov');
$(this).addClass('infoDataHov');
var id = this.id;
id = id.replace("tab", "info");
var clicked = $('.infoExpand #' + id);
if (clicked.is(':visible')){
$(this).removeClass('infoDataHov');
clicked.slideToggle();
}else{
$('.infoExpand p:visible').slideToggle();
clicked.slideToggle();
}
});
精彩评论