修改

Question

我做了一个替换.toggle（）的函数，所以我可以添加更多的东西，但它不起作用。当我点击h1元素时，它确实变成了class =＆＃34; off＆＃34;但是它不会转回到班级=＆＃34; on＆＃34;如果我再次点击它。

<body>
    <h1 class="on">Show second word!</h1>
    <h2 id="submenu">hello</h2>


    <script>
    $("#submenu").hide();

    $('.on').click(function()
    {
        $(this).removeClass('on');
        $(this).addClass('off');
        $('#submenu').show();
    });


    $('.off').click(function()
    {
        $(this).removeClass('on');
        $(this).addClass('off');
        $('#submenu').hide();
    });
    </script>
</body>

Jfiddle： http://jsfiddle.net/T6MgH/

Answer 1

您有几个错误，您应该利用事件委派：

    $(document).on('click', '.on', function()
    {
        $(this).removeClass('on');
        $(this).addClass('off');
        $('#submenu').show();
    });


    $(document).on('click', '.off', function()
    {
        $(this).removeClass('off');  // these were out of order in your fiddle
        $(this).addClass('on'); // so they are now flipped
        $('#submenu').hide();
    });
});

http://jsfiddle.net/jayblanchard/T6MgH/3/

Answer 2

您的事件不是被动的，因此更改类不会更改它触发的功能。页面加载后，jQuery将在每个.on上应用事件，并在每个.off上应用一个事件。

您可以使用事件委派来解决这个问题，但为什么不简单地使用.toggle()？

$('.on').click(function()
{
    $(this).toggleClass('on off'); //Can be removed if there is no style associated.
    $('#submenu').toggle();
});

修改

另一种解决方案是使用活动类并检查类

$('.on').click(function()
{
    $(this).toggleClass('off')
    if($(this).hasClass('off')){
        //Close function
        $(this).hide();
    }else{
        //Open function
        $(this).show();
    }
});

Answer 3

最初在dom中不存在.off类。点击事件未附加。所以这个功能是行不通的。所以你需要在添加.off类时绑定事件。

$(document).on('click', '.on', function()
{
    $(this).removeClass('on');
    $(this).addClass('off');
    $('#submenu').show();
});


$(document).on('click', '.off', function()
{
    $(this).removeClass('off');  // these were out of order in your fiddle
    $(this).addClass('on'); // so they are now flipped
    $('#submenu').hide();
});
});

它会起作用，因为@Jay Blanchard在文档中添加了事件，而不是在特定项目上。并且文件始终存在。

或者，有一种非常简单的方法，如果你只是展示什么＆amp;隐藏#submenu，不要改变开/关课程。使用以下内容。

  $('.on').click(function()
        {
            if($('#submenu').hasClass('show')){
                $('#submenu').removeClass('show').addClass('hide');
                $('#submenu').hide();
            } else {
                $('#submenu').removeClass('hide').addClass('show');
                $('#submenu').show();

            }

        });

如果您正在使用show css for show＆amp;将类隐藏为display：block; ＆安培;显示：无;你甚至不必使用$（＆＃39;＃submenu＆＃39;）。show（）; ＆安培; $（＆＃39;＃子＆＃39;）隐藏（）。功能

Jquery替换切换不起作用

3 个答案:

修改