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>

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

Answer 1

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

相反，您应该使用 toggle event ，它允许您绑定(bind)多个click处理程序，这些处理程序将执行每个其他点击。

例如:

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