一次后Jquery无法更改类名

Here is my code for Dropdown Menu Appear and Disappear..

If the class name is "dropdown pull-right" then the menu will be closed

If the class name is "dropdown pull-right open" then the menu will be opened

<li class="dropdown pull-right" id="tobechanged">            
    <a data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false">
    <i class="fa fa-user"></i> Admin <b class="caret"></b>              
    </a>
</li>

So, i wrote this query

$(".dropdown-toggle" ).click(function() {
console.log(document.getElementById("tobechanged").className);
if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
      console.log('opening menu');
      document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
    }
    else
    {
      console.log('closing menu');
    document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
    }

});

It works only in the first time. If i change to another page only the console console.log('opening menu'); works and the class name is changing..

What is the mistake i am doing and how can i make the class name change ?

Note : I am using angularjs, so the page won't be reloaded entirely

A fix plus some additional improvements; no need to search for the elements a couple of times

$(".dropdown-toggle" ).click(function() {
  var el = document.getElementById("tobechanged");
  if (el.className == "dropdown pull-right" ) {
      console.log('opening menu');
      el.className = "dropdown pull-right open";
  }
  else {
      console.log('closing menu');
      el.className = "dropdown pull-right";
  }
});

To do it in in JQuery :

$(".dropdown-toggle" ).click(function() {
  $(this).closest('#tobechanged').toggleClass('open');
});

Update: Demo https://jsfiddle.net/n13svnLL/

The issue I see is that once you execute the line:

document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";

This basically will change your html from :

<li class="dropdown pull-right" id="tobechanged">            
   <a data-toggle="dropdown" class="**dropdown-toggle**" aria-expanded="false">
   <i class="fa fa-user"></i> Admin <b class="caret"></b>              
   </a>
</li>

into

<li class="dropdown pull-right" id="tobechanged">            
   <a data-toggle="dropdown" class="**dropdown pull-right open**" aria-expanded="false">
   <i class="fa fa-user"></i> Admin <b class="caret"></b>              
   </a>
</li>

Making basically your element no longer available for click event, because the click is subscribed to an element by class name which you change.

$(".dropdown-toggle" )

Hope this is not too confusing.

I think you should change the Class of the Parent li Element not the a Element inside it.

    <pre>you are assigning class name only for dropdown-toggle so it will work only one time for that you have to assign same class name to id (tobechanged) as well</pre>

if (document.getElementById("tobechanged").className == "dropdown pull-right" ) {
      console.log('opening menu');
      document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right open";
      document.getElementById("tobechanged").className == "dropdown pull-right open";
}
else
{
       console.log('closing menu');
       document.getElementsByClassName("dropdown-toggle").className = "dropdown pull-right";
       document.getElementById("tobechanged").className == "dropdown pull-right"
}