Question

我使用此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中的第一项产生影响

Answer 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'));

javascript不会在html对象上生成新的类名

1 个答案: