Question

我有一个带有左侧菜单的页面，当用户点击链接时，该页面会折叠/显示内容。这完全适用于我的示例中的href，数据目标，数据折叠组和数据切换：http://jsfiddle.net/ns_19/rff70hfL/

工作代码链接示例：

    <li style="font-size: small">
        <a href="#collapse2" data-target="#collapse2" 
        data-collapse- group="myDivs" data-toggle="collapse">
        Anti-Corruption Laws</a>
    </li>

JavaScript扩展/折叠面板

$("[data-collapse-group='myDivs']").click(function () {
    var $this = $(this);
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data   ("target") + "'])").each(function () {
        $($(this).data("target")).removeClass("in").addClass('collapse');
    });
});

我现在需要添加一个直接链接到页面上每个面板的内容映射。如此处所示（内容图 - http://jsfiddle.net/ns_19/fsL7pntf/）。我只能使用展开的默认面板访问该页面，但我无法直接访问当前折叠的任何其他面板。

我尝试扩展href以包含表单名称，并在多个站点上搜索任何现有的已提交问题。无论我选择哪个链接，都只显示页面的第一个或默认部分。

我认为问题是被调用页面上的JavaScript没有接收到对其采取行动的价值。有没有人知道如何通过我试图访问的页面上的JavaScript抓住并处理#Collapse？

请注意，这些页面最初是使用主页和内容设置的，但由于jsfiddle限制而放在一起。

Answer 1

我终于通过反复试验弄明白了。但是，如果有人想提出改进建议我会很感激。

两个文件都有几处修改：

将ContentMap上的href更改为:(注意如果我使用＃collapse2，则发送#never。）为所有链接执行此操作。
```
<a title="Insider Trading" href="../Forms/Assets.aspx?section=collapse2">Insider Trading</a>
```

在我的母版页的代码隐藏中，我添加了以下两个代码块。如果已传递特定部分，则只检查查询字符串，如果已经传递，则设置主页上隐藏字段的值。

protected void Page_PreRender(object sender, System.EventArgs e)
{
    NavToSection();
}

protected void NavToSection() {
    List<string> keys = new List<string>(Request.QueryString.AllKeys);

    if(keys.Contains("section")) {
        this.HiddenMaster.Value = Request.QueryString["section"];
    }
}

在母版页上，我添加了隐藏字段和以下两个JavaScript函数。当文档＆＃34;准备就绪时，$(document).ready(checkCollapse);函数只调用checkCollapse(jQuery)＆＃34;

<input type="hidden" id="HiddenMaster" name="HiddenMaster" value="default" runat="server" />    

function checkCollapse(jQuery) {
    var oValToCheck = document.getElementById('HiddenMaster').value; //get the value of the hidden field in the master "HiddenMaster"

    if (oValToCheck != 'default') {  //If the HiddenMaster's value is not equal to 'default' then continue.
        var oCollapse = document.getElementById(oValToCheck);  // Search the DOM for the object I am looking for to expand.
        var isTargetExpanded = $(oCollapse).hasClass('in');  // Check if section already is already expanded.  Not really needed here anymore
        $(oCollapse).removeClass('collapse').addClass("in"); // expand selected target by changing the css classes assigned to it
        var $this = $(this);  // get reference to this page.  JQuery reference 
        $this.data("target", "#" + oValToCheck); // assign the target 

        //cycle through all "myDivs" and remove 'in' or add 'collapse' to any div where target is not equal to passed value
        $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function () { 
            $($(this).data("target")).removeClass("in").addClass('collapse');
        });
    }
}

$(document).ready(checkCollapse); // Execute the checkCollapse function once the document 'isready'

面板从另一页面折叠（展开）

1 个答案: