添加關閉按鈕，打開的slideToggle DIV

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插入。單擊以打開內容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(); 
});