Question

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

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

我一直在努力从触发器2加载panel-2 ......我注意到.trigger和.panel的行为（有些）正如预期的那样（我注意到一些css风格的古怪）。

如果我删除了.panel-2和.trigger-2，代码表现得很完美......但是否则它没有。

我试图复制我在这里阅读的内容：http://www.w3schools.com/jquery/sel_multiple_classes.asp。

Answer 1

这里的问题是，无论您点击哪个触发器，两个（或所有）面板都将被激活，因为您选择它们并在它们上面调用.toggle。有许多方法可以解决此问题，例如将触发器上相应的面板索引存储为data，或使用索引。后者可能适合你。

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

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

Answer 2

另一个选择是为链接/容器使用单个类名。我已经清理了一些代码并提供了悬停功能来显示您的链接。这应该是一个很好的起点。使用列表的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

Jquery切换不工作/ 2个类（多个类选择器？）

2 个答案: