Question

我找到了一个很好的下拉菜单。问题是，我试图在同一页面上有多个下拉列表，但使用相同的类，所以我不必复制样式。

脚本在此处形成：

http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

我已经下载了代码并尝试在页面上添加两个代码，但是当点击其中一个代码时，它会触发两个代码。我用.parent（），。children（）等尝试了几件事，但没有任何效果。

任何人都可以帮助并指出我正确的方向吗？这是可以看到源代码的演示页面：

http://www.jankoatwarpspeed.com/examples/reinventing-drop-down/

更新：这是我正在处理的演示页面的副本：http://multideveloper.com/tests

万分感谢！

Answer 1

最好定义一个ID，如果你已经有了。为每个下拉列表定义一个不同的类。您可以为单个元素定义多个类。

Answer 2

这是因为下拉组件假设只有一个实例，并通过类名绑定它。

通过脚本中的一些更改，您可以获得多个实例。变更摘要如下。

演示： http://jsfiddle.net/fZbx6/1/

我发表评论以突出改变。

$(document).ready(function() {
    $(".dropdown img.flag").addClass("flagvisibility");

    $(".dropdown dt a").click(function() {

        // old
        //$(".dropdown dd ul").toggle();

        // new
        $(this).parents(".dropdown").find("dd ul").toggle();

    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();

        // old
        //$(".dropdown dt a span").html(text);
        //$(".dropdown dd ul").hide();

        // NEW
        var dd = $(this).parents(".dropdown");
        dd.find("dt a span").html(text);
        dd.find("dd ul").hide();

        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });


    $("#flagSwitcher").click(function() {
        $(".dropdown img.flag").toggleClass("flagvisibility");
    });
});

Answer 3

该脚本基本上采用下拉列表并显示列表元素 - $('#sample > dd > ul').show();

最好是为每个select元素指定一个唯一ID，然后触发下拉列表。这样，只会显示目标元素。

从同一个类的多个切换只有一个下拉列表

3 个答案: