Question

这里的id下拉小提琴 http://jsfiddle.net/ym8t7Lhj/

我面临的问题是我有两个下拉菜单，如果我点击一个下拉列表，另一个下拉菜单也会打开。任何人都可以帮助我。

脚本

        $(document).ready(function() {
        $(".dropdown dt a").click(function() {
        $(this).toggleClass("myclass"); 
         $(".dropdown dd ul").toggle();
         });

        $(".dropdown dd ul li a").click(function() {

            var text = $(this).html();
            $('.dropdown dt a').toggleClass('myclass');
            $(".dropdown dt a span").html(text);
            $(".dropdown dd ul").hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
        });      
    });

Answer 1

像这样更改你的代码，

$(document).ready(function() {
    $(".dropdown dt a").click(function() {
        $(this).toggleClass("myclass");
        $(this).closest(".dropdown").find("dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        var parent = $(this).closest(".dropdown");
        parent.find("dd ul").toggle();
        parent.find('dt a').toggleClass('myclass');
        parent.find("dt a span").html(text);
        parent.find('dt ul').hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });
});

注意：相对于单击的元素切换元素。

Updated Fiddle

Answer 2

试试这个

$(document).ready(function() {
 $(".dropdown dt a").click(function() {
        $(this).toggleClass("myclass"); 
         $(this).closest('dl').find('ul').toggle();
 });

 $(".dropdown dd ul li a").click(function() {

            var text = $(this).html();
             $(this).closest('dl').find('dt a').toggleClass('myclass').find('span').html(text);

            $(this).closest('ul').hide();
            $("#result").html("Selected value is: " + getSelectedValue("sample"));
  });      
});

Answer 3

将(".dropdown dd ul").toggle();替换为以下内容：

$(this).parent().next().find("ul").toggle();

完整代码：

       $(document).ready(function() {
          $(".dropdown dt a").click(function() {
             $(this).toggleClass("myclass");    
             $(this).parent().next().find("ul").toggle();
          });

            $(".dropdown dd ul li a").click(function() {

                var text = $(this).html();
                var thisRoot = $(this).closest('.dropdown');
                thisRoot.find('dt a').toggleClass('myclass');
                thisRoot.find("dt a span").html(text);
                thisRoot.find("dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
            });      
        });

Answer 4

您正在使用相同的选择器同时进行下拉菜单。尝试在它们上添加ID然后使用$（'dropdown1'）和$（'dropdown2'）

[Working Code][1]


  [1]: http://jsfiddle.net/ym8t7Lhj/5/

Answer 5

不要为每个人使用ID。只有你必须记得访问onclick   元素来自 $（this）

所以它只会给你元素。没有其他与此相同   类。

同时打开两个下拉列表的问题

5 个答案: