我使用此javascript通过展开DropDown
函数功能生成“切换”类名的额外单词,并在单击时删除它:
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
/* event.stopPropagation();*/
return false;
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown').removeClass('active');
});
});
我想让JavaScript生效的HTML看起来像, (我的目标是class =“wrapper-dropdown”):
<div class="wrapper">
<div id='dd' class="wrapper-dropdown">1'st subject
<ul class="dropdown">
<li><a href="content.php?page=1">1</a></li>
<li><a href="content.php?page=7">2</a></li>
<li><a href="content.php?page=8">3</a></li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">2'nd subject
<ul class="dropdown">
<li><a href="content.php?page=2">1</a></li>
<li><a href="content.php?page=3">2</a></li>
</ul>
</div>
<div id='dd' class="wrapper-dropdown">3'rd subject
<ul class="dropdown"></ul>
</div>
<div id='dd' class="wrapper-dropdown">4'th subject
<ul class="dropdown">
<li><a href="content.php?page=9">1</a></li>
<li><a href="content.php?page=11">2</a></li>
</ul>
</div>
</div>
问题是JavaScript只对包装器div中的第一项产生影响
答案 0 :(得分:1)
因为您有多个带有id='dd'
的div - ID需要是唯一的。
只需向您的div添加dd
类,如下所示:
<div class="wrapper-dropdown dd">1'st subject
<ul class="dropdown">
<li><a href="content.php?page=1">1</a></li>
<li><a href="content.php?page=7">2</a></li>
<li><a href="content.php?page=8">3</a></li>
</ul>
</div>
并更改el
:var dd = new DropDown($('.dd'));