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 的同级".box"div?那么每个下拉框都不需要唯一的 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 回答