javascript - 第二个处理程序不能在切换事件中运行

Question

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

你可以在这里查看我的 jsfiddle

我尝试使用第一个和第二个处理程序使用此代码

$(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..中使用第二个处理程序，但我知道切换功能中没有第二个处理程序..检查文档..（如果我错了，请告诉我）..如果它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', '+');
     }
 });
 });  

在这里工作小提琴

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);
    });

});

JSF中。

Answer 4

你可以试试这个：小提琴

$(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;
            });
        }
    });
});