Question

我有这个标记：

        <span id="tabPhp" class="infoData">PHP</span>
        <span id="tabJquery" class="infoData">jQuery</span>
        <span id="tabWordpress" class="infoData">WordPress</span>
        <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>

这个jQuery：

$('.infoData').click(function(){
    $('.infoExpand p').hide();
    var id = this.id;
    id = id.replace("tab", "info");
    console.log(id);
    $('.infoExpand, #' + id).slideToggle();
});

默认情况下，div infoExpand设置为display：none，所以我想要发生的是，当用户点击span id tabPHP时，infoExpand会与p id infoPhp一起向下滑动。这样可以正常工作，但是当用户点击另一个标签时，它只会滑动当前显示的p。我希望它向上滑动当前的一个并向下滑动它们点击的那个。

这有意义吗？

由于

Answer 1

你可以做（更新）：

$('.infoExpand p').hide();
$('.infoData').click(function(){
    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();
    }

});

在这里摆弄：http://jsfiddle.net/35MfY/1/

jQuery slideDown如果元素当前不是“Slid”

1 个答案: