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>

Работает fint при добавлении класса, но затем, когда я снова нажимаю кнопку, он не удалит класс "open"

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

Answer 2

Причина, по которой он не работает, заключается в том, что идентификатор dropdown2 не завершается при регистрации обработчика щелчков.Вы можете использовать, чтобы жить, чтобы преодолеть это, но лучше использовать классы:

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

});