Question

此下拉脚本适用于在div上使用不同ID的多个下拉列表：

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 demo

$(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;}

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

3 个答案: