dououde4065
dououde4065
2015-09-03 12:16

一次后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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • duanqiao8925 duanqiao8925 6年前

    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/

    点赞 评论 复制链接分享
  • douxiajia6720 douxiajia6720 6年前
        <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"
    }
    
    点赞 评论 复制链接分享
  • dousong1926 dousong1926 6年前

    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.

    点赞 评论 复制链接分享
  • donglan8256 donglan8256 6年前

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

    点赞 评论 复制链接分享