Jquery切换不工作/2个类(多个类选择器？)

Question

我的代码在这里：http://jsfiddle.net/GwUmb/4/

    $(document).ready(function(){
    $(".trigger,.trigger-2").click(function(){
        $(".panel,.panel-2").toggle("fast");
        $(this).toggleClass("active");
        return false;
    });
});

我一直在努力从trigger-2加载panel-2……我注意到.trigger和.panel的行为(在某种程度上)和预期的一样(我注意到一些css风格的怪异)。

如果我删除.panel-2和.rigger-2，代码就会执行perfectly...but，否则就不会。

我试图复制我在这里读到的东西：http://www.w3schools.com/jquery/sel_multiple_classes.asp。

Answer 1

您的另一个选择是为您的链接/容器使用单个类名。我已经清理了你的代码，并提供了一个悬停功能来显示你的链接。这对你来说应该是一个很好的起点。使用列表的CSS方法可能是更简单的方法……

工作示例是这里的http://jsfiddle.net/GwUmb/11/

更新的jQuery：

$(document).ready(function() {

                //global var to hold the current selected link
                var $link;

                $('.trigger').hover(function() {
                    $link = $(this);
                    //get position of clicked link
                    var linkPos = $link.position();
                    //position & display this links panel
                    $link.toggleClass("active");
                    $link.siblings('.panel').css({
                        'top' : linkPos.top
                    }).fadeIn(600);

                }, function() {//hide the panel on mouseout
                    $link.siblings('.panel').slideUp(600);
                    $link.removeClass('active');
                });

            });
            // end ready

Answer 2

这里的问题是，无论您单击哪个触发器，两个(或所有)面板都将被激活，因为您选择了这两个面板并对其调用.toggle。有很多方法可以解决这个问题，比如将触发器上面板的相应索引存储为data，或者使用索引。后者可能对您很有效。

$(".trigger").click(function(e) {
    $(".panel").eq($(this).index(".trigger")).toggle("fast");
    $(this).toggleClass("active");
    e.preventDefault();
});

http://jsfiddle.net/GwUmb/6/