开发者

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();
    }

});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜