Question

我有这段代码：

$('.open-mypage1').click(function () {
   $('#mypage-info1').slideToggle('2000', "swing", function () {
        // Animation complete.
   });
});   

http://jsfiddle.net/haifisch/q59dz078/4/

它工作正常，但不是点击“打开我的页面？”按钮关闭切换的div，我想在打开的div中有一个单独的“关闭”按钮。

我怎样才能做到这一点？

Answer 1

你可以这样做：

$('.open-mypage1,#mypage-info1 button').click(toggleDiv);
function toggleDiv(){
 $('#mypage-info1').slideToggle('2000', "swing", function () {
        // Animation complete.
    });
}

<强> jsFiddle example

或者，如果您只想打开文本并关闭它，可以使用：

$('.open-mypage1').click(function(){
    $('#mypage-info1').slideDown('2000', "swing", function () {
        // Animation complete.
    });
});
$('#mypage-info1 button').click(function(){
    $('#mypage-info1').slideUp('2000', "swing", function () {
        // Animation complete.
    });
});

<强> jsFiddle example

Answer 2

您可以使用slideToggle的slideUp和slideDown insetad。单击以打开内容div，您将有slideDown或打开div，并在关闭时，您将有用于关闭内容div的slideUp。

此处示例http://jsfiddle.net/q59dz078/5/

$('.open-mypage1').on('click', function (e) {
    $('#mypage-info1').stop().slideDown('2000', "swing");
    e.preventDefault();
});

$('.close-mypage1').on('click', function (e) {
    $('#mypage-info1').stop().slideUp('2000', "swing");
    e.preventDefault();
});

添加关闭按钮以打开slidetoggle div

2 个答案: