jquery - JQuery 修改所以它切换

Question

我有这些功能来显示和隐藏隐藏 div 中的内容。我怎样才能做到这一点，所以我只需要使用一个可以打开和关闭的按钮？

<script type="text/javascript" src="js/jquery.js"></script>
    <script> 
    jQuery(document).ready(function() { 
        $('.pagesplit').click(function() { 
            $('.page-split-wrap').css({'display': 'block'}) 
            $('.page-split-wrap').animate({height: '250px'}, 500);
        });  

        $('.pagemerge').click(function() { 
            $('.page-split-wrap').animate({height: '0px'}, 500, function() { 
                $('.page-split-wrap').css({'display': 'none'}); 
            }); 
        }); 
    }); 
    </script>

Answer 1

使用.toggle事件，而不是.click.

jQuery(document).ready(function() { 
    $('.pagetoggle').toggle(function() { 
        $('.page-split-wrap').css({'display': 'block'}) 
        $('.page-split-wrap').animate({height: '250px'}, 500);
    }, function() { 
        $('.page-split-wrap').animate({height: '0px'}, 500, function() { 
            $('.page-split-wrap').css({'display': 'none'}); 
        }); 
    }); 
}); 

Answer 2

如果您不想使用 deprecated .toggle()，您可以让您的点击处理程序交替使用它们使用的函数，如下所示：

jQuery(document).ready(function() {
    var showContent = function() { 
        $('.page-split-wrap').css({'display': 'block'}) 
        $('.page-split-wrap').animate({height: '250px'}, 500);
        // Switch handlers
        $('.pagesplit').unbind('click');
        $('.pagesplit').click(hideContent);
    };  

    var hideContent = function() { 
        $('.page-split-wrap').animate({height: '0px'}, 500, function() { 
            $('.page-split-wrap').css({'display': 'none'}); 
        }); 
        // Switch handlers
        $('.pagesplit').unbind('click');
        $('.pagesplit').click(showContent);
    };  

    $('.pagesplit').click(showContent);
});