[在向我指出了另一种调试方法后,问题发生了变化,我找到了问题的真正原因-感谢Pointy和user2864740]
我正在尝试模拟(在窥视源代码之前)bootstrap的下拉菜单。
我将onclick侦听器附加到每个a.dropdown-toggle。侦听器获取节点的父级,使用节点的父级查找实际的下拉菜单,然后添加或删除打开的类。
获取下拉菜单节点(一个ul元素)后,我使用element.className,但它返回未定义。这尤其奇怪,因为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');
}
});
});
dropDownMenu.attr('class');
dropDownMenu现在是一个jquery对象-不是DOM对象。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句