1

我的代码在这里：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 和 .trigger-2 代码表现完美......但否则它不会。

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

4

2 回答 2

2

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

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

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

于 2013-04-28T23:30:50.193 回答
0

您的另一个选择是为您的链接/容器使用单个类名。我已经稍微清理了您的代码，并提供了一个悬停功能来显示您的链接。这对你来说应该是一个很好的起点。使用列表的 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
于 2013-04-29T03:06:38.713 回答