0

DropDownこの JavaScript を使用して、関数機能を拡張し、クリックするとドロップすることで、クラス名に余分な単語を「トグル」します。

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 の最初の項目でのみ有効になることです。

4

1 に答える 1

1

複数の div があるため、id='dd'ID は一意である必要があります。

dd次のように div にクラスを追加するだけです。

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

于 2013-02-06T09:22:18.357 に答える