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事件会解决这个问题)

相反,您应该使用该toggle事件,该事件允许您绑定click将执行每次其他单击的多个处理程序.

例如:

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