1

このドロップダウン スクリプトは、div で異なる ID を使用して複数のドロップダウンで動作します。

http://jsfiddle.net/D2kGy/

HTML:

<div class="box">
    <div id="label_1" class="title">Title</div>

    <div id="drop_1" class="dropdown">
    Content
    </div> <!-- md -->
</div> <!-- ms -->

<br><br><br>

<div class="box">
    <div id="label_2" class="title">Title</div>

    <div id="drop_2" class="dropdown">
    Content
    </div> <!-- md -->
</div> <!-- ms -->

jQuery:

$(document).ready(function () {
    $(this).on('click',".box, .box div", function (e) {
        e.stopPropagation();
        var id = this.id.replace('label_', '');
        if ($("#drop_" + id).is(":hidden")) {
            $('.title_active').siblings('[id^=drop_]').hide();
            $('.title_active').removeClass("title_active");
            $("#drop_" + id).show();
            $(this).addClass("title_active");
            $(this).parent().addClass("ms_active");
        } else {
            $("#drop_" + id).hide();
            $(this).removeClass("title_active");
        }
    });
});

「問題」は、ページで予想されるよりも多くのドロップダウン/選択ボックスがあったため、ID の使用が (多くの異なる ID に対して) 乱雑になっていることです。

質問:兄弟 div を div に表示/非表示にするだけでこのスクリプトを動作させる方法はあり".box"ますか? では、すべてのドロップダウン ボックスに固有の ID は必要ないのでしょうか?

4

3 に答える 3

5

はい.siblings()、クリックされた要素に関連する要素にアクセスするために使用できます。これにより、一意の ID が不要になり、クラスに基づいて機能します。

jsFiddle デモ

$(document).ready(function () {
    $(this).on('click',".box, .box div", function (e) {
        e.stopPropagation();
        var drop = $(this).siblings('.dropdown');

        if (drop.is(":hidden")) {
            $('.title_active').removeClass("title_active")
                .siblings('.dropdown').hide();
            drop.show();
            $(this).addClass("title_active");
            $(this).parent().addClass("ms_active");
        } else {
            drop.hide();
            $(this).removeClass("title_active");
        }
    });
});
于 2013-07-03T10:18:14.610 に答える
0

HTMLマークアップを変更せずに機能する別の スクリプトhttp://jsfiddle.net/D2kGy/5/.siblings()

于 2013-07-03T10:28:28.027 に答える
0

これは、複数の ID の代わりにクラスを使用してコードを再利用可能にする非常に簡単な方法です。

HTML

<div class="uthr">
 <div class='cnt'>Hello World</div>
 <div class='cnt2'>Good Bye World</div>
 <a class='hs1' href="#" >Show</a>
</div>

<div class="uthr">
 <div class='cnt'>Hello World</div>
 <div class='cnt2'>Good Bye World</div>
 <a class='hs1' href="#" >Show</a>
</div>

JS

$('.hs1').click(function() {        
    $(this).siblings('.cnt2').toggle('show');
});

CSS

.cnt2{display:none;}
于 2016-08-23T07:22:18.220 に答える