-1

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

脚本在这里形成：

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

太感谢了！

4

3 回答 3

1

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

于 2012-10-01T12:19:46.010 回答
1

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

通过对脚本进行一些更改，您可以使多个实例正常工作。更改摘要如下。

演示：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");
    });
});
于 2012-10-01T12:23:35.087 回答
0

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

最好给每个选择元素一个唯一的 ID，然后触发下拉菜单。这样，只会显示目标元素。

于 2012-10-01T12:25:59.520 回答