将多个链接表映射到嵌套的JQuery手风琴

Mapping multiple link tables to a nested JQuery accordion

本文关键字：嵌套 JQuery 手风琴 映射 链接表      更新时间：2023-11-15

这是我第一次询问Stack Overflow，请耐心等待。

我一直在尝试使用Jquery和Javascript实现一个HTML页面。以下是我的页面的示例JSFiddle：http://jsfiddle.net/R63Hz/2/.请注意，顶部的三个表具有映射到底部嵌套手风琴结构的元素。我想使用Javascript来映射这些表中的链接，以打开适当的手风琴部分。我尝试了很多方法，但我认为我没有足够的知识来弄清楚。

以下是我最近尝试的解决方案：

    $(this).on("click", ".linkButton", function () {
            var $tbl = $(this).closest("table");
            var $tr = $(this).closest("tr");
            var row = $tr.index() - 1;
            var table = $tbl.attr("id");
            if(table=="table1") {
                ("#accordion").accordion({ active: 0 });
                ("#accordion2").accordion({ active: row });
            }
            else if(table=="table2") {
                ("#accordion").accordion({ active: 1 });
                ("#accordion3").accordion({ active: row });
            }
            else if(table=="table3") {
                ("#accordion").accordion({ active: 2 });
                ("#accordion4").accordion({ active: row });
            }
        });

我不确定第5行是否正在为条件语句设置。

您可以为各个链接分配一个数据值，然后在on.click处理程序中创建一个if语句，该语句将扩展相关的手风琴部分。

你的小提琴很长/很乱，这就是为什么我没有用确切的解决方案编辑小提琴，但我希望上面的内容有意义。

这是我找到的解决方案：

对于第一个表，我将linkbutton类重命名为linkbutton1，对于第二个表，将linkbutton2重命名为linkutton3。然后，我在此基础上在JQuery上创建了条件打开。我搞砸的主要原因是我忘记了打开手风琴的命令前的$标志。

    $(this).on("click", ".linkButton", function () {
            var $tr = $(this).closest("tr");
            var row = $tr.index() - 1;
            $("#accordion").accordion({ active: 0 });   
            $("#accordion2").accordion({ active: row });    
        });
        $(this).on("click", ".linkButton2", function () {
            var $tr = $(this).closest("tr");
            var row = $tr.index() - 1;
            $("#accordion").accordion({ active: 1 });   
            $("#accordion3").accordion({ active: row });    
        });
        $(this).on("click", ".linkButton3", function () {
            var $tr = $(this).closest("tr");
            var row = $tr.index() - 1;
            $("#accordion").accordion({ active: 2 });   
            $("#accordion4").accordion({ active: row });    
        });
相关文章：