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

如果您不想使用已弃用的.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);
});

JQuery修改所以它切换

2 个答案: