[Question was changed after an alternate debugging method was pointed out to me and I found the real cause of the problem - thanks to Pointy and user2864740]

I'm trying to emulate (before taking a peek at the source code of) bootstrap's dropdown menu.

I attach an onclick listener to every a.dropdown-toggle. The listener grabs the node's parent, uses the node's parent to find the actual dropdown menu and adds or removes the open class.

After getting the dropdown menu node (a ul element) I use element.className but it returns undefined. This is especially strange because jquery's .attr('class') returns the expected result.

I'm using jquery 1.10.2.

HTML:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
    <ul class="dropdown-menu open">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Privacy</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
    </ul>
</li>

CSS:

li.divider {
    border-top: solid 1px grey;
    padding: 0px 0px;
}

.dropdown-menu {
  position: absolute;
  display: none;
  border: 1px solid grey;
  list-style-type: none;
}

.dropdown a:link, .dropdown a:visited {
    text-decoration: none;
    color: black;
}

.dropdown-menu.open{
    display: block;
}

Javascript:

$( document ).ready(function(){

    $('a.dropdown-toggle').click(function(e){

        e.preventDefault();

        dropDownMenu = $(this.parentNode).find('.dropdown-menu'); // does not return dropdown menu

        console.log( "According to jquery, class name is: " + dropDownMenu.attr('class') ); // prints dropdown-menu
        console.log( "According to .className, class name is: " + dropDownMenu.className ); //prints undefined

        if ( dropDownMenu.attr('class').indexOf('open') > -1 ) { // previously dropDownMenu.className.indexOf('open') > -1
            alert('removing class');
        }else{
            alert('adding class');
        }

    });

});

[Question was changed after an alternate debugging method was pointed out to me and I found the real cause of the problem - thanks to Pointy and user2864740]

I'm trying to emulate (before taking a peek at the source code of) bootstrap's dropdown menu.

I attach an onclick listener to every a.dropdown-toggle. The listener grabs the node's parent, uses the node's parent to find the actual dropdown menu and adds or removes the open class.

After getting the dropdown menu node (a ul element) I use element.className but it returns undefined. This is especially strange because jquery's .attr('class') returns the expected result.

I'm using jquery 1.10.2.

HTML:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Account <b class="caret"></b></a>
    <ul class="dropdown-menu open">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Privacy</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
    </ul>
</li>

CSS:

li.divider {
    border-top: solid 1px grey;
    padding: 0px 0px;
}

.dropdown-menu {
  position: absolute;
  display: none;
  border: 1px solid grey;
  list-style-type: none;
}

.dropdown a:link, .dropdown a:visited {
    text-decoration: none;
    color: black;
}

.dropdown-menu.open{
    display: block;
}

Javascript:

$( document ).ready(function(){

    $('a.dropdown-toggle').click(function(e){

        e.preventDefault();

        dropDownMenu = $(this.parentNode).find('.dropdown-menu'); // does not return dropdown menu

        console.log( "According to jquery, class name is: " + dropDownMenu.attr('class') ); // prints dropdown-menu
        console.log( "According to .className, class name is: " + dropDownMenu.className ); //prints undefined

        if ( dropDownMenu.attr('class').indexOf('open') > -1 ) { // previously dropDownMenu.className.indexOf('open') > -1
            alert('removing class');
        }else{
            alert('adding class');
        }

    });

});

• javascript
• jquery
• html
• css

• Inside a jQuery event handler, this does refer to the target of the event. Create jsfiddle test-case reproducing the issue, as it is likely a misunderstanding. "When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered.." – user2864740 Commented May 24, 2014 at 3:37
• 2 The alert() function is a terrible choice for debugging efforts like this. Use console.log() instead and you'll see that this really is the <a> node. – Pointy Commented May 24, 2014 at 3:37
• I'll just delete this now... thanks Pointy. Unless that is rude, do you want to write an answer and I'll accept? – user2316667 Commented May 24, 2014 at 3:40
• 1 @user2316667 I don't like when posts are deleted - if you've isolated the problem or found the reason for the disagreement, then you can also post an answer yourself! – user2864740 Commented May 24, 2014 at 3:41
• I think I'll delete it, it adds no value or information. It is based on a misunderstanding. Thank you all though. – user2316667 Commented May 24, 2014 at 3:45

1 Answer 1

dropDownMenu.attr('class');

dropDownMenu is a jquery object now- not a DOM object.