Question

[在我指出另一种调试方法之后问题发生了变化，我找到了问题的真正原因 - 感谢Pointy和user2864740]

我正试图模仿（在查看源代码之前）bootstrap的下拉菜单。

我将onclick监听器附加到每个a.dropdown-toggle。侦听器抓取节点的父节点，使用节点的父节点查找实际的下拉菜单，并添加或删除打开的类。

获取下拉菜单节点（ul元素）后，我使用element.className，但它返回undefined。这特别奇怪，因为jquery的.attr（'class'）返回预期的结果。

我正在使用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');
        }

    });

});

Answer 1

dropDownMenu.attr('class');

dropDownMenu现在是一个jquery对象 - 而不是DOM对象。

Element.className返回undefined？

1 个答案: