Jquery 手风琴 - 打开和关闭按钮

Question

在下面的 cmets 中回答了问题。查看指向 Fiddle 的链接

我正在为下面的 jquery 寻求一点帮助。

简而言之，我想要发生的是，当单击“关于”按钮时，它会打开一个包含文本和关闭按钮的手风琴（.toggle-container）。 （这部分我可以做到。）棘手的部分是，此时我希望“关于”按钮消失，直到手风琴再次关闭。

你可以从小提琴中看到奇怪的事情正在发生。

页面上有多个部分，一次只能打开一个部分。

Fiddle

<section class="staff-member">
<figure>
    <h2>:(</h2>
    <figcaption>
        <a class="open-profile" href="">About</a>
            <div class="toggle-container">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet, enim at hendrerit bibendum, leo turpis feugiat risus, id sagittis eros urna auctor lorem. Suspendisse interdum turpis ut est auctor dignissim.</p>
                <a class="close-profile" href="">Close</a>
            </div>
    </figcaption>
</figure>
</section>

(function($, document, undefined){
$('.toggle-container').each(function() {
var $container = $(this);
var $open = $container.siblings('.open-profile');
var $close = $container.find('.close-profile');

$open.on('click', function(e) {
    e.preventDefault();
    $open.hide();
    $container.slideUp('fast');
});
$close.on('click', function(e) {
    e.preventDefault();
    $container.slideDown('fast');
    $open.show();
});
});
})(jQuery, document);

Answer 1

1) 从你的小提琴中，你放错了 .slideDown 和 slideUp。

2 无需隐藏关于和关闭。

$open.on('click', function(e) {
        e.preventDefault();
        $container.slideDown('fast');  //corrected it
    });
    $close.on('click', function(e) {
        e.preventDefault();
        $container.slideUp('fast');   //corrected it

    });

查看JSFiddle

更新：既然您需要隐藏链接，请摆脱我的第二点。

open.on('click', function(e) {
        e.preventDefault();
        $open.hide();   // don't remove        
        $container.slideDown('fast'); //corrected it
    });
    $close.on('click', function(e) {
        e.preventDefault();
        $container.slideUp('fast'); //corrected it
        $open.show();   // don't remove
    });