jquery - addClass 和 removeClass 不起作用

Question

我有一个菜单，它应该作为点击菜单工作，所以当点击按钮时会出现一个菜单，当再次点击按钮时，菜单应该消失，但我无法让它工作？

我有这个脚本

<script type="text/javascript">
      $(document).ready(function() { 
        $('#dropdown').click(function(){
            setTimeout(function(){
                $('#dropdown').attr("id", "dropdown2");
                $('#dropmenu').addClass("open");
                //$('#dropmenu').fadeIn('fast');
            },500);
        })
        $('#dropdown2').click(function(){
            setTimeout(function(){
                $('#dropdown').attr("id", "dropdown");
                $('#dropmenu').removeClass("open");
                //$('#dropmenu').fadeIn('fast');
            },500);
        })
      });
    </script>

添加类时它可以正常工作，但是当我再次单击按钮时，它不会删除类“打开”

Answer 1

编写后$('#dropdown').attr("id", "dropdown2");，第二个处理程序中的代码没有#dropdown元素可以匹配。
此外，当您绑定第二个处理程序时，还没有#dropdown2元素。（live事件将解决该问题）

相反，您应该使用toggleevent，它允许您绑定click将执行每隔一次单击的多个处理程序。

例如：

$(document).ready(function() { 
    $('#dropdown').toggle(
        function() {
            setTimeout(function(){
                $('#dropdown').addClass("open")
                              .fadeIn('fast');
            }, 500);
        },
        function() {
            setTimeout(function(){
                $('#dropdown').removeClass("open")
                              .fadeOut('fast');
            }, 500);
        }
    );
});

Answer 2

它不起作用的原因是当您注册点击处理程序时 dropdown2 id 没有退出。您可以使用 to live 来克服这个问题，但最好使用类：

  $(document).ready(function() { 
    $('#dropdown').click(function(){
        if (!$(this).hasClass("open")) {
          setTimeout(function(){
              $('#dropmenu').addClass("open");
             //$('#dropmenu').fadeIn('fast');
          },500);
       } else {
        setTimeout(function(){
            $('#dropmenu').removeClass("open");
            //$('#dropmenu').fadeIn('fast');
        },500);
      }
    })
  });

Answer 3

我更新了上面的代码，对我有好处。请试试这个，

$(document).ready(function(){  
    $("#loginlink").click(function(){
        $('.container .col-sm-6 ul li .dropdown-menu').first().toggle(
            function() {
                setTimeout(function(){
                    $('.container .col-sm-6 ul li').first().addClass("open").fadeIn('fast');
                });
            }
        );
        if(("#loginformstarthere").length){ 
            $(".container .col-sm-6 ul li .dropdown-menu").first().append( "hello");
    }

});