jquery - 使用 toggleSlide 显示/隐藏 DIV

Question

我像这样显示/隐藏 DIV:

HTML:

<a href="#" class="showhide" source="one"> Show/Hide </a>
<div id="one"></div>

<a href="#" class="showhide" source="two"> Show/Hide </a>
<div id="two"></div>

jQuery:

jQuery('.showhide').live( 'click' , function () {
    source = $(this).attr("source");
    $( '#' + source ).slideToggle( 'slow' );
    return false;
});

Above code is working for me .

现在我想问两件事:

• 如何在 Div 关闭时将文本 “显示/隐藏” 更改为显示，在 DIV 打开时将其更改为隐藏？

• 如何在第一次加载页面时隐藏所有这些 DIV？

对上述代码的任何改进也表示赞赏。

谢谢。

Answer 1

示例:http://jsfiddle.net/svtTj/

<a href="#" class="showhide" data-source="one">Show</a>
<div class="showhide__box" id="one">Test one</div>

<a href="#" class="showhide" data-source="two">Show</a>
<div class="showhide__box" id="two">Test two</div>

页面加载后隐藏框的一些样式:

.showhide__box {
    display: none;
}

一点升级的js:

$('.showhide').live( 'click' , function () {
    var _target = $( '#' + $(this).data('source') );
    $(this).text( _target.is(':visible') ? 'Show' : 'Hide' );
    _target.slideToggle( 'slow' );
    return false;
});