jquery - 隐藏/显示兄弟 div 而不是使用多个 ID？

Question

此下拉脚本适用于在 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 的同级".box"div？那么每个下拉框都不需要唯一的 ID 吗？

Answer 1

是的，您可以使用它.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");
        }
    });
});

Answer 2

另一个无需更改 html 标记即可运行的脚本http://jsfiddle.net/D2kGy/5/ 使用.siblings()

Answer 3

这是一种使用类而不是多个 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;}