Question

问题在下面的评论中回答。请参阅小提琴的链接

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

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

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

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

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

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

1 个答案: