Question

我尝试使用切换创建简单的显示/隐藏框但是当框打开时，按钮将更改为“ - ”，当框关闭时，按钮将更改回“+”

你可以查看我的jsfiddle here

我使用第一个和第二个处理程序

尝试使用此代码

$(document).ready(function () {
    //default
    $('.content').hide();

    $('#b_1').click(function () {

        $('.content').toggle(function () {
            $('#b_1').prop('value', '-');    //first handler
        },
            function() {
            $('#b_1').prop('value', '+');    //second handler
        });

    });
});

但第二个处理程序无法正常工作..

Answer 1

我见过人们在toggle中使用第二个处理程序..但是我知道在切换函数中没有第二个处理程序..检查docs ..（如果我错了，请告诉我）..如果它是toggle-event那么它在jQuery 1.8中被弃用并在jQuery 1.9中删除。

无论如何，这是我如何解决你的问题

$('#b_1').click(function () {

 $('.content').toggle('slow',function () {
     if($('.content').is(':visible')){
        $('#b_1').attr('value', '-');
     }else{
        $('#b_1').attr('value', '+');
     }
 });
 });

工作fiddle here

Answer 2

尝试

<script type="text/javascript">

    $(function()
    {
        $('.content').hide();

        $('#b_1').toggle(function ()
        {
            $(this).attr('value', '-');
            $(this).next('.content').show();
        },
        function()
        {
            $(this).attr('value', '+');
            $(this).next('.content').hide();
        });

    });

</script>

Answer 3

更好地手动处理toggle()。

$('#b_1').click(function () {

    var $button = $(this);
    $('.content').toggle(function () {
        var symbol = $button.attr("value"),
            newSymbol = symbol == "+" ? "-" : "+";

        $button.attr("value", newSymbol);
    });

});

JSFiddle

Answer 4

您可以尝试：fiddle

$(document).ready(function () {
    var i = 0;
    $('.content').hide();
    $('#b_1').click(function () {
        if (i == 0) {
            $('.content').toggle('slow', function () {
                $('#b_1').val('-');
                i = 1;
            });
        } else if (i = 1) {
            $('.content').toggle('slow', function () {
                $('#b_1').val('+');
                i = 0;
            });
        }
    });
});

第二个处理程序无法在toggle-event内运行

4 个答案: